APL ScrollView

ScrollViewは子を1つ保持でき、垂直方向にスクロールします。設定できるコンポーネントは1つだけです。

プロパティ

ScrollViewコンポーネントには、コンポーネントプロパティのほかに次のプロパティがあります。列の意味については、こちらをご覧ください。

heightとwidthのプロパティは、それぞれデフォルトで100dpに設定されています。

プロパティ	型	デフォルト	スタイル設定	動的	説明
`item/items`	コンポーネントの配列	[]	✕	✕	ScrollViewに表示するコンポーネントです。
`onScroll`	コマンド配列	[]	✕	✕	スクロール中に実行するコマンドです。

ScrollViewは1つの子を保持します。ScrollViewの子は、任意の長さで垂直方向に配置できます。子のサイズが画面に完全に収まる場合は、スクロールは起こりません。エラーを最小限に抑えるため、ScrollViewのheightを指定しない場合はデフォルトで100dpになります。

ScrollViewコンポーネントがイベントのターゲットである場合、event.targetは以下の値を報告します。

"event": {
  "target": {
    "disabled": Boolean, // コンポーネントが無効な場合はtrue
    "id": ID,            // コンポーネントのID
    "uid": UID,          // ランタイムで生成されたコンポーネントの固有ID
    "height": Number,    // コンポーネントのdp単位の高さ（パディングを含む）
    "opacity": Number,   // コンポーネントの不透明度[0～1]
    "position": Number,  // スクロールしたコンポーネントの位置（パーセント表記）
    "width": Number      // コンポーネントのdp単位の幅（パディングを含む）
  }
}

報告されるposition値は、onScrollプロパティのvalueプロパティと同じ方法で計算されます。

item

子コンポーネントです。コンポーネントを複数指定した場合は、whenプロパティで選択された最初のコンポーネントが使用されます。

onScroll

スクロール中に実行するコマンドの配列です。ランタイムでは、スクロール中にフレームを描画するたびにこれらのコマンドの実行が1回試行されますが、正常に実行されない場合もあります。デバイスの処理速度が遅い場合、onScrollコマンドは断続的にしか実行されない可能性があります。

コマンドで出力されるevent.source.valueは、現在のスクロール位置をスクロールビューの高さで割ったパーセント値になります。たとえば、ScrollViewの高さが200ピクセルであり、コンテンツを上方向に320ピクセルだけ動かした場合、出力される値は1.60になります。

生成されるイベントの形式は次のようになります。

"event": {
  "source": {
    "type": "ScrollView",
    "handler": "Scroll",
    "id": ID,          // ScrollViewコンポーネントのID
    "uid": UID,          // ランタイムで生成されたコンポーネントの固有ID
    "value": Number    // 現在のスクロール位置の割合
  }
}

ScrollViewのサンプル

{
  "type": "ScrollView",
  "item": {
    "type": "Text",
    "text": "${payload.longTextBlock}"
  }
}