フラッターをマスターする: カスタム スクロールビュー

このチュートリアルでは、CustomScrollView ウィジェットとそのスライバーを使用してカスタム スクロール効果を実現する方法を学習します.カスタム スクロール ビューは、特定のスクロール効果を開発したい場合や、ScrollView のスクロール コンテンツをより詳細に制御したい場合に特に便利です.

では、スライバーとは何ですか?ドキュメントから:

A sliver is a portion of a scrollable area. You can use slivers to achieve custom scrolling effects.

Sliver は、RenderSliver 個のオブジェクトを生成する必要がある特定のウィジェットであり、CustomScrollView の子です.

ListViews と GridViews はどちらも、フードの下で CustomScrollView とスライバー ウィジェットを使用します.

Flutter が提供する便利な Sliver を次に示します.

SliverAppBar : このスライバーはアプリ バーをレンダリングします.通常、カスタム スクロールの最初の子として使用されます.ユーザーのスクロールに応じて高さを変更するように構成できます.

SliverGrid : ウィジェットのグリッドをレンダリングするスライバー

SliverList および SliverFixedExtentList : scrollview 内のリストをレンダリングするスライバー.リストの固定範囲バージョンは、その子の高さ/幅を計算する必要がないため、より効率的です

SliverToBoxAdapter : ボックス ウィジェットを含むスライバー.カスタム スクロール ビュー内にウィジェットを埋め込みたい場合に便利です

SliverPadding : パディングを別のスライバーに適用するスライバー.

最初のカスタム スクロール ビューを作成しましょう.

CustomScrollView(
        slivers: <Widget>[
          const SliverAppBar(
            pinned: true,
            expandedHeight: 250.0,
            flexibleSpace: FlexibleSpaceBar(
              title: Text('Custom Scroll View'),
            ),
          ),
          SliverGrid(
            gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
              maxCrossAxisExtent: 200.0,
              mainAxisSpacing: 10.0,
              crossAxisSpacing: 10.0,
              childAspectRatio: 4.0,
            ),
            delegate: SliverChildBuilderDelegate(
              (BuildContext context, int index) {
                return Container(
                  alignment: Alignment.center,
                  color: Colors.amber,
                  child: Text('$index'),
                );
              },
              childCount: 20,
            ),
          ),
          SliverFixedExtentList(
            itemExtent: 50.0,
            delegate: SliverChildBuilderDelegate(
              (BuildContext context, int index) {
                return Container(
                  alignment: Alignment.center,
                  child: Text(' $index'),
                );
              },
            ),
          )

これは単純なスクロールビューです:

上部のアプリバー

グリッド

リスト

そして、結果は次のとおりです.

Check it out here

NotificationListener と ScrollNotification

カスタム スクロール ビューを使用する場合に特に役立つその他のウィジェットは NotificationListener ScrollNotification です.このウィジェットを使用すると、ScrollController を使用せずにユーザーがスクロールしたときにイベントを受け取ることができます.

CustomScrollView を NotificationListener 内にラップしましょう.

NotificationListener<ScrollNotification>(
        onNotification: (notification) {
          print(notification);
          return true;
        },
        child: CustomScrollView(
...
)

これで、ユーザーがスクロール ビューを操作するたびに、onNotification コールバックが ScrollNotification で呼び出されます.通知の情報を使用して、ウィジェットのレイアウトを変更したり、データを管理したりできます.
ユーザーがスクロール ビューのコンテンツの最後に到達すると、より多くのデータを読み込むことができます).
実装しましょう.

          onNotification: (notification) {
            if (notification is ScrollEndNotification) {
              // We use 20 as our threshold to load more data
              if (notification.metrics.extentAfter < 20) {
                print('Load more data');
              }
            }
            return true;
          },

さらに素晴らしいチュートリアルをチェックしたい場合は、here をクリックしてください.