APL ScrollView

APL ScrollView

ScrollViewは1つの子を保持し、垂直方向にスクロールします。

プロパティ

ScrollViewコンポーネントには、次のプロパティがあります。

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

プロパティ 型 デフォルト スタイル設定 動的 説明

item、items

コンポーネントの配列

[]

×

×

ScrollViewに表示するコンポーネントです。

preserve

文字列の配列

[]

×

×

Reinflateコマンドでドキュメントを再インフレートするときに保存するプロパティです。

onScroll

コマンドの配列

[]

×

×

スクロール中に実行するコマンドです。

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

ScrollViewがイベントのソースまたはターゲットである場合は、次の値がevent.sourceまたはevent.targetに報告されます。

{
  // ScrollView固有の値
  "type": "ScrollView",
  "position": Number,  // コンポーネントのスクロール位置（パーセンテージ）
  "allowForward": Boolean,   // trueの場合、前方にスクロールできる余地がある
  "allowBackwards": Boolean, // trueの場合、後方にスクロールできる余地がある

  // 一般的なコンポーネントの値
  "bind": Map,         // コンポーネントのデータバインディングコンテキストへのアクセス
  "checked": Boolean,  // チェックの状態
  "disabled": Boolean, // 無効化の状態
  "focused": Boolean,  // フォーカスの状態
  "height": Number,    // コンポーネントのdp単位の高さ（パディングを含む）
  "id": ID,            // コンポーネントのID
  "opacity": Number,   // コンポーネントの不透明度 [0～1]
  "pressed": Boolean,  // 押下の状態
  "uid": UID,          // ランタイムで生成されたコンポーネントの固有ID
  "width": Number      // コンポーネントのdp単位の幅（パディングを含む）
}

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

一部のプロパティは、コンポーネントのレイアウトが完了した後にのみ有効になります。詳細については、onLayoutハンドラーを参照してください。

item

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

onScroll

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

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

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

"event": {
  "source": {
    "type": "ScrollView",
    "handler": "Scroll",
    ...                     // コンポーネントのソースプロパティ
  }
}

event.sourceの詳細については、eventプロパティを参照してください。

onScrollイベントハンドラーは、コンポーネントのデータバインディングコンテキストで高速モードで実行されます。

preserve

Reinflateコマンドでドキュメントを再インフレートするときに保存する、動的なコンポーネントプロパティとバインドされたプロパティの配列です。

ScrollViewには以下のコンポーネント固有のプロパティ名があり、これらをpreserve配列に割り当てることができます。

  • scrollOffset - 絶対スクロール位置（dp単位）です。
  • scrollPercent - 相対スクロール位置（可視領域のパーセンテージ）です。

たとえば、固定幅で固定フォントサイズのテキストを含むスクロールビューを再インフレートする場合、scrollOffsetを使用すると、スクロールビューで最初に表示されるテキスト行が同じ位置に保たれます。

{
  "type": "ScrollView",
  "id": "MyScrollView",
  "preserve": [ "scrollOffset" ]
}

アクション可能なプロパティ

ScrollViewはアクション可能なコンポーネントです。ScrollViewは、すべてのアクション可能なプロパティを継承します。

ScrollViewのサンプル

以下は、1つのTextコンポーネントを子項目として含むScrollViewの例です。

ScrollViewに複数のコンポーネントを表示するには、Containerを子項目として使用します。たとえば、小さなビューポートではヘッダーとフッターをScrollView内に含め、大きなビューポートではそれらの要素をスクロール領域の外側に配置することが望ましい場合があります。この場合、小さなビューポートのScrollViewでは、ヘッダー、コンテンツを持つTextコンポーネント、フッターを含むContainerを使用します。例については、スクロールテキストをヘッダーおよびフッターと結合するを参照してください。

項目のスクロール可能なリストを表示するには、代わりにSequenceコンポーネントを使用することをお勧めします。

このページは役に立ちましたか？

最終更新日: 2025 年 12 月 04 日