Flutter NestedScrollView示例

嵌套SliverAppBar

class NestedScrollViewComponent extends StatefulWidget {
  const NestedScrollViewComponent({Key? key, required this.title})
      : super(key: key);

  final String title;

  @override
  State<NestedScrollViewComponent> createState() {
    return NestedScrollViewState();
  }
}

class NestedScrollViewState extends State<NestedScrollViewComponent> {
  @override
  Widget build(BuildContext context) {
    return Material(
      child: NestedScrollView(
        headerSliverBuilder: (context, innerBoxIsScrolled) {
          return <Widget>[
            SliverAppBar(
              title: const Text("嵌套ListView"),
              pinned: true,
              //固定在顶部
              forceElevated: innerBoxIsScrolled,
              floating: true,
              snap: true,
              expandedHeight: 240,
              flexibleSpace: FlexibleSpaceBar(
                background: Image.asset("images/avatar.png", fit: BoxFit.cover),
              ),
            ),

            //构建一个 sliverList
            SliverList(
              delegate: SliverChildBuilderDelegate(
                    (BuildContext context, int index) {
                  return ListTile(
                    title: Text('List $index'),
                  );
                },
                childCount: 5,
              ),
            ),
          ];
        },
        body: ListView.builder(
          padding: const EdgeInsets.all(10),
          physics: const ClampingScrollPhysics(),
          itemCount: 30,
          itemBuilder: (context, index) {
            return SizedBox(
              height: 40,
              child: Center(child: Text("Item $index")),
            );
          },
        ),
      ),
    );
  }

  buildSliverList(int i) {
    ListView.builder(
      padding: const EdgeInsets.all(10),
      physics: const ClampingScrollPhysics(),
      itemCount: i,
      itemBuilder: (context, index) {
        return SizedBox(
          height: 40,
          child: Center(child: Text("$index")),
        );
      },
    );
  }
}

或

class NestedScrollViewComponent extends StatefulWidget {
  const NestedScrollViewComponent({Key? key, required this.title})
      : super(key: key);

  final String title;

  @override
  State<NestedScrollViewComponent> createState() {
    return NestedScrollViewState();
  }
}

class NestedScrollViewState extends State<NestedScrollViewComponent> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: NestedScrollView(
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return <Widget>[
            // 实现 snap 效果
            SliverAppBar(
              floating: true,
              snap: true,
              expandedHeight: 200,
              forceElevated: innerBoxIsScrolled,
              flexibleSpace: FlexibleSpaceBar(
                background: Image.asset(
                  "images/avatar.png",
                  fit: BoxFit.cover,
                ),
              ),
            ),
          ];
        },
        body: Builder(builder: (BuildContext context) {
          return CustomScrollView(
            slivers: <Widget>[buildSliverList(100)],
          );
        }),
      ),
    );
  }

  buildSliverList(int i) {
    return SliverList(
      delegate: SliverChildBuilderDelegate(
        (BuildContext context, int index) {
          return ListTile(
            title: Text('List $index'),
          );
        },
        childCount: i,
      ),
    );
  }
}

嵌套 TabBarView

class NestedScrollViewComponent extends StatefulWidget {
  const NestedScrollViewComponent({Key? key, required this.title})
      : super(key: key);

  final String title;

  @override
  State<NestedScrollViewComponent> createState() {
    return NestedScrollViewState();
  }
}

class NestedScrollViewState extends State<NestedScrollViewComponent> {
  @override
  Widget build(BuildContext context) {
    final _tabs = <String>['猜你喜欢', '今日特价', '发现更多'];
    // 构建 tabBar
    return DefaultTabController(
      length: _tabs.length, // This is the number of tabs.
      child: Scaffold(
        body: NestedScrollView(
          headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
            return <Widget>[
              SliverOverlapAbsorber(
                handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
                sliver: SliverAppBar(
                  title: const Text('商城'),
                  floating: true,
                  snap: true,
                  forceElevated: innerBoxIsScrolled,
                  bottom: TabBar(
                    tabs: _tabs.map((String name) => Tab(text: name)).toList(),
                  ),
                ),
              ),
            ];
          },
          body: TabBarView(
            children: _tabs.map((String name) {
              return Builder(
                builder: (BuildContext context) {
                  return CustomScrollView(
                    key: PageStorageKey<String>(name),
                    slivers: <Widget>[
                      SliverOverlapInjector(
                        handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
                      ),
                      SliverPadding(
                        padding: const EdgeInsets.all(8.0),
                        sliver: buildSliverList(50),
                      ),
                    ],
                  );
                },
              );
            }).toList(),
          ),
        ),
      ),
    );
  }

  buildSliverList(int i) {
    return SliverList(
      delegate: SliverChildBuilderDelegate(
        (BuildContext context, int index) {
          return ListTile(
            title: Text('List $index'),
          );
        },
        childCount: i,
      ),
    );
  }
}

效果