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}"
}
}