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