NestedScroll

NestedScrollウィジェットは、ヘッダー領域と本文領域のスクロールを1つに連動させて一緒に動かすスクロールコンテナです。
上部のヘッダーが折りたたまれたり固定されたりする間、下のリストが続けてスクロールする画面で使います。

備考

このウィジェットはFreeプランではロックされており、Pro・Enterpriseプランで使用できます。

定義・役割

NestedScrollウィジェットは、外側（outer）のスクロールと内側（inner）のスクロールを1つのジェスチャーで連結します。ヘッダースリバーとして指定した子は上部のヘッダー領域に、残りの子は本文領域に配置され、ヘッダーが折りたたまれた後に本文が続けてスクロールします。

• カテゴリー: Layouts
• スクロール方向: 縦（デフォルト）または横
• ヘッダー固定（pinned）と浮かぶヘッダー（floating）の動作に対応

機能

機能	説明
ヘッダー・本文のスクロール連動	外側のヘッダー領域と内側の本文領域のスクロールを1つの動作として続けて処理します。
スクロール方向	scrollDirectionで縦・横を指定し、reverseで進行方向を反転します。
ヘッダーを浮かせる	floatHeaderSliversをオンにすると、戻る方向にスクロールしたときにヘッダーがすぐに現れます。
スクロールイベント	スクロールの開始・更新・停止・末尾到達のタイミングでアクションを実行します。
プログラムからの制御	スクリプトで先頭または末尾へスクロール位置を移動します。

使い方

1. 左のウィジェットパレットでLayoutsカテゴリーを開きます。
2. NestedScroll項目をキャンバスにドラッグ＆ドロップします。
3. ヘッダーとして使う子と本文として使う子を中に配置します。
4. 右のプロパティパネルでscrollDirection・reverseなどスクロールの動作を設定します。
5. 必要に応じてonStartScroll・onScrollEndなどのスクロールイベントに実行するアクションを接続します。

プロパティ

プロパティ	説明	デフォルト値	値 / タイプ
scrollDirection	スクロール方向	縦（vertical）	horizontal, vertical
reverse	スクロールの進行方向を反転	false	true/false
floatHeaderSlivers	戻る方向にスクロールしたときにヘッダーをすぐに表示	false	true/false
clipBehavior	内容が領域を超えたときの切り取り方式	hardEdge	none, hardEdge, antiAlias, antiAliasWithSaveLayer
dragStartBehavior	ドラッグによるスクロールが開始される基準	start	down, start
restorationId	スクロール位置の復元用の識別子	未設定	文字列

注意・ヒント

ヒント

ヘッダー領域と本文領域は子の配置によって分かれます。ヘッダースリバーとして指定された子が上部のヘッダーになり、残りの子が本文として扱われます。

警告

NestedScrollの中にさらに別のNestedScrollを入れる構成はサポートされません。

さらに詳しく

ヒント

このウィジェットをスクリプトで制御するWidget Control（Property・Method・Event）の全体は、NestedScroll Widget Controlドキュメントで確認してください。