Flutter：Slivers大家族，让滑动视图的组合变得很简单！

最新推荐文章于 2025-06-25 09:12:31 发布

吉原拉面

最新推荐文章于 2025-06-25 09:12:31 发布

阅读量1.8w

点赞数 1

CC 4.0 BY-SA版权

分类专栏： FlutterUI 文章标签： Flutter Slivers

本文链接：https://blog.youkuaiyun.com/yumi0629/article/details/83305627

本文介绍了Flutter中的Slivers组件，如SliverAppBar、SliverList、SliverGrid和SliverPersistentHeader等，展示了如何利用它们创建滑动视图的组合，并通过示例代码解释了各组件的特性和使用场景。Slivers帮助开发者实现复杂滑动嵌套布局，如AppBar的展开/收起功能，以及定制化的滑动头部视图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文中所有示例代码请点击：https://gitee.com/yumi0629/FlutterUI/tree/master/lib/sliver

今天呢，我小拉面主要想给大家讲一讲Flutter中的Slivers大家族的使用场景和方法。开发过列表布局的同学们应该对Slivers系列的控件不陌生，或多或少都用过这个库中的控件，来解决复杂的滑动嵌套布局。
比如之前讲Hero的时候提到的下面这个界面，使用普通的GridView的话是没法实现的，我们选择使用CustomScrollView，然后在slivers属性中添加子控件，在这个例子里，我们可以用SliverToBoxAdapter来做HeaderView，GridView来做主体布局，整体为一个CustomScrollView，完全不会出现任何滑动冲突的问题。

Flutter中的Slivers大家族基本都是配合CustomScrollView来实现的，除了上面提到的滑动布局嵌套，你还可以使用Slivers来实现页面头部展开/收起、
AppBar随手势变换等等功能。官方的Sliver库里面的控件很多，可以去Flutter API网站搜一下，这篇文章我只讲一些常用的控件。
OK, Let's start !!

SliverAppBar

如果你是一名Android开发者，一定使用过CollapsingToolbarLayout这个布局来实现AppBar展开/收起的功能，在Flutter里面则对应SliverAppBar控件。给SliverAppBar设置flexibleSpace和expandedHeight属性，就可以轻松完成AppBar展开/收起的功能：

CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            actions: <Widget>[
              _buildAction(),
            ],
            title: Text('SliverAppBar'),
            backgroundColor: Theme.of(context).accentColor,
            expandedHeight: 200.0,
            flexibleSpace: FlexibleSpaceBar(
              background: Image.asset('images/food01.jpeg', fit: BoxFit.cover),
            ),
            // floating: floating,
            // snap: snap,
            // pinned: pinned,
          ),
          SliverFixedExtentList(
            itemExtent: 120.0,
            delegate: SliverChildListDelegate(
              products.map((product) {
                return _buildItem(product);
              }).toList(),
            ),
          ),
        ],
      );