美文网首页
NestedScrollView

NestedScrollView

作者: 乐狐 | 来源:发表于2022-07-12 08:57 被阅读0次
    NestedScrollView.png
    import 'package:flutter/material.dart';
    
    void main() {
      runApp(const MaterialApp(
        debugShowCheckedModeBanner: false,
        home: NestedTabBarView(),
      ));
    }
    
    class NestedScrollViewWidget extends StatelessWidget {
      const NestedScrollViewWidget({Key? key}) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: NestedScrollView(
            headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
              return [
                SliverOverlapAbsorber(
                  handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
                  sliver: SliverAppBar(
                    snap: true,
                    floating: true,
                    expandedHeight: 200,
                    forceElevated: innerBoxIsScrolled,
                    flexibleSpace: FlexibleSpaceBar(
                      background: Image.network(
                        "https://upload.jianshu.io/admin_banners/web_images/5055/348f9e194f4062a17f587e2963b7feb0b0a5a982.png?imageMogr2/auto-orient/strip|imageView2/1/w/1250/h/540",
                        fit: BoxFit.cover,
                      ),
                    ),
                  ),
                ),
              ];
            },
            body: Builder(builder: (BuildContext context) {
              return CustomScrollView(
                slivers: [
                  SliverOverlapInjector(
                    handle:
                        NestedScrollView.sliverOverlapAbsorberHandleFor(context),
                  ),
                  buildSliverList(100)
                ],
              );
            }),
          ),
        );
      }
    
      Widget buildSliverList([int count = 5]) {
        return SliverFixedExtentList(
          delegate: SliverChildBuilderDelegate(
            (ctx, index) {
              return ListTile(
                leading: Text("Item $index"),
              );
            },
            childCount: count,
          ),
          itemExtent: 50,
        );
      }
    }
    
    class NestedTabBarView extends StatelessWidget {
      const NestedTabBarView({Key? key}) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        final _tabs = <String>['猜你喜欢', '今日特价', '发现更多'];
    
        return DefaultTabController(
          length: _tabs.length,
          child: Scaffold(
            body: NestedScrollView(
              headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
                return [
                  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: [
                          SliverOverlapInjector(
                            handle: NestedScrollView.sliverOverlapAbsorberHandleFor(
                                context),
                          ),
                          SliverPadding(
                            padding: const EdgeInsets.all(8.0),
                            sliver: buildSliverList(50),
                          ),
                        ],
                      );
                    },
                  );
                }).toList(),
              ),
            ),
          ),
        );
      }
    
      Widget buildSliverList([int count = 5]) {
        return SliverFixedExtentList(
          delegate: SliverChildBuilderDelegate(
            (ctx, index) {
              return ListTile(
                leading: Text("Item $index"),
              );
            },
            childCount: count,
          ),
          itemExtent: 50,
        );
      }
    }
    

    相关文章

      网友评论

          本文标题:NestedScrollView

          本文链接:https://www.haomeiwen.com/subject/qecpbrtx.html