重识Flutter 用于解决复杂滑动视窗问题的Slivers – part1

前语

在日常的开发工作中，仅仅运用ListView、ListView.builder等这样的滑动组件就能满意大部分的事务需求，在碰到较为杂乱的滑动页面时，加上Slivers系列中的几个常用组件也简略的完成。这也就导致了一些朋友没有较为完好的去了解Slivers系列。那么在重识Flutter这个专栏中，预计有5篇slivers相关的文章，从组件的运用到其背后的烘托原理，让咱们一同探究Slivers的魅力吧！

---

视窗是什么？ Sliver是什么？

相信点进这篇文章的朋友，一定会知道ListView这样的翻滚组件，翻滚组件会供给一个区块，用于翻滚的显现内容，但内容很多时，咱们只能看到可翻滚内容中的部分内容。这个就是视窗（ViewPort），也就是列表的可视区域巨细。例如一个ListView的显现区域高度为500像素，它列表项总高度可能远远超过500个像素，但是它的ViewPort仍为500像素。

那么Sliver是什么呢？咱们能够经过ListView.builder()，设置itemCount为null，构建一个无限的列表内容，只要当咱们翻滚时，才会动态的去创立需求出现在视窗中的内容。这个就是Sliver，假如一个翻滚组件支持Sliver模型，那么这个组件会将子组件分成很多个Sliver，只要当Sliver出现在视窗中才会构建。

CustomScrollView

像ListView、GridView等组件，在底层完成中都有着对应的Sliver，如SliverList、SliverGrid。Sliver版别的可翻滚组件和非Sliver版别的可翻滚组件最大的差异就是：Sliver版别的组件不包括翻滚模型（Scrollable），组件本身不能翻滚。

所以，假如想要运用Sliver系列的组件，就需求给它们增加翻滚模型。Flutter供给了CustomScrollView，做为Sliver系列组件运转的容器。CustomScrollView首要的作用就是供给Viewport和一个公共的Scrollable，多个Sliver组件共用CustomScrollView的Scrollable，就达到了单一翻滚的场景。

CustomScrollView有着许多特点，其间最常用的就是slivers，用来传入Sliver组件列表。就像这样：

Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverList(/**/),
          SliverGrid(/**/),
        ],
      ),
    );

有了CustomScrollView组件的帮助，完成杂乱的翻滚作用，好像不是那么困难。

SliverList

假如需求在一个界面创立多个列表，刚了解Flutter的朋友可能会运用Column中包裹多个ListView去完成，就像这样：

但是这样的作用肯定不符合需求，假如想要让它们一同翻滚，或增加一些杂乱的动画，完成像这样的作用：

那么借助SliverList就能很简略的完成。

SliverList是Sliver Widget的一种，作用是将Widget摆放在一个List中，运用SliverList需求界说delegate。Sliver delegate是用于描述运用哪种办法对组件进行烘托，一般有两种：static和builder。

在SliverList中，能够界说两种类型的delegate：

• SliverChildListDelegate：获取需求显现的组件列表。此列表中界说的组件将被立即出现。不会有任何推迟加载。
• SliverChildBuilderDelegate：获取将推迟创立的小部件列表。这意味着跟着用户翻滚，剩下的组件才会开始烘托。

能够简略的把ListView理解为：CustomScrollView + SliverList + SliverChildListDelegate；把ListView.Builder理解为：CustomScrollView + SliverList + SliverChildBuilderDelegate。

在了解了SliverList需求界说的delegate后，那么运用它就和运用ListView相同简略：

CustomScrollView(
        slivers: [
          SliverList(
            delegate: SliverChildListDelegate([
              Container(
                height: 50,
                color: Colors.primaries[0],
              ),
            ]),
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate((BuildContext ctx, int index) {
              return Container(
                height: 50,
                color: Colors.primaries[index % Colors.primaries.length],
              );
            }, childCount: 5),
          ),
        ],
      ),

SliverGrid

SliverGrid与GridView相同，将组件以一行两个或一行多个的形式摆放。它除了和SliverList相同需求界说一个正常的delegate之外，还需求传入gridDelegate，用于描述每行怎么显现组件。就像这样：每行最多4个，每个组件的宽度是高度的1.5倍。

SliverGrid(
  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: 4,
      crossAxisSpacing: 5,
      mainAxisSpacing: 3,
      childAspectRatio: 1.5),
  delegate:
      SliverChildBuilderDelegate((BuildContext context, int index) {
    return Container(
      color: Colors.primaries[index % Colors.primaries.length],
    );
  }, childCount: 20),
)

在SliverGrid中能够界说两种gridDelegate：

• SliverGridDelegateWithFixedCrossAxisCount：指定一行中有多少列，运用它会自动扩展到屏幕最大宽度。

• • crossAxisCount特点是列数
  • childAspectRatio特点是宽高比
  • XXXSpacing特点是指每个item之间的边距

• SliverGridDelegateWithMaxCrossAxisExtent： 能够指定列的宽度

• • maxCrossAxisExtent 是列中的最大宽度

能够把GridView.builder理解为：CustomScrollView + SliverGrid + SliverChildBuilderDelegate + gridDelegate

遇到一些简略的需求，也能够运用缩写组件：

• SliverGrid.count ：SliverGrid + SliverChildListDelegate + SliverGridDelegateWithFixedCrossAxisCount
• SliverGrid.extent： SliverGrid + SliverChildListDelegate + SliverGridDelegateWithMaxCrossAxisExtent

SliverGrid.count(
  crossAxisCount: 3,
  children: [
    ...List.generate(
      3,
      (index) => Container(
        color: Colors.primaries[index % Colors.primaries.length],
      ),
    )
  ],
),
SliverGrid.extent(
  maxCrossAxisExtent: 100,
  children: [
    ...List.generate(
      9,
      (index) => Container(
        color: Colors.primaries[index % Colors.primaries.length],
      ),
    )
  ],
)

SliverGrid与SliverList一同运用即可获得这样的作用：

SliverAppBar

AppBar是大部分应用程序很重要的组件，它位于App的顶部，首要操控一些可操作按钮。在Flutter中，常在Scaffold下运用AppBar组件。那么什么是SliverAppBar呢？SliverAppBar Widget是 Flutter 中用于兼容 CustomScrollView的，它与AppBar组件相同，意味着它具有AppBar的所有特点，如：title、actions、leading，但它也有一些额外的参数，如pinned, floating, snap，expandedHeight用于自界说AppBar的行为。SliverAppBar一般作为CustomScrollView slivers中的第一个组件。

Scaffold(
  body: CustomScrollView(
    slivers: [
      SliverAppBar(
        title: Text("Hello SliverAppBar & Taxze"),
        actions: <Widget>[
          IconButton(onPressed: () => null, icon: const Icon(Icons.add))
        ],
      ),
    ],
  ),
)

这就是一个很经典的Material应用程序的AppBar。

SliverAppBar特点众多，与AppBar相同的特点在本文就不过多介绍，首要讲解其特有的特点。

expandedHeight

该特点界说了AppBar完全展开时的巨细，高度会跟着向下翻滚而缩小。

SliverAppBar(
  title: Text("Hello SliverAppBar & Taxze"),
  expandedHeight: 200,
  actions: <Widget>[
    IconButton(onPressed: () => null, icon: const Icon(Icons.add))
  ],
),

未设置expandedHeight	expandedHeight: 200

pinned

该特点用于确认当用户向下翻滚时，AppBar在屏幕上是否保持可见。

SliverAppBar(
  title: Text("Hello SliverAppBar & Taxze"),
  expandedHeight: 200,
  pinned: true,
  actions: <Widget>[
    IconButton(onPressed: () => null, icon: const Icon(Icons.add))
  ],
),

pinned: true	pinned: false

floating

该特点假如设置为true，则AppBar将在用户向上翻滚时立即可见。假如为false那么只要当翻滚到顶部才干可见。

SliverAppBar(
  title: Text("Hello SliverAppBar & Taxze"),
  expandedHeight: 200,
  floating: true,
  actions: <Widget>[
    IconButton(onPressed: () => null, icon: const Icon(Icons.add))
  ],
),

floating: true	floating: false

snap

该特点假如设置为true，那么用户向上翻滚一点，即可见完好的AppBar。运用该特点需求将floating设置为true。

SliverAppBar(
  title: Text("Hello SliverAppBar & Taxze"),
  expandedHeight: 200,
  floating: true,
  snap: true,
  actions: <Widget>[
    IconButton(onPressed: () => null, icon: const Icon(Icons.add))
  ],
),

snap: true	floating: true

在作用图中能显着看出snap和floating的显着差异。

flexibleSpace

该特点用于给AppBar供给background和collapseMode，还有能够随用户翻滚而改变方位的title。

SliverAppBar(
  expandedHeight: 200,
  flexibleSpace: FlexibleSpaceBar(
    title: Text("First FlexibleSpace",style: TextStyle(color: Colors.red),),
    background: Image.network(
        "https://p3-passport.byteimg.com/img/user-avatar/af5f7ee5f0c449f25fc0b32c050bf100~180x180.awebp",
        fit: BoxFit.cover),
  ),
  actions: <Widget>[
    IconButton(onPressed: () => null, icon: const Icon(Icons.add))
  ],
),

当用户向上翻滚时，就会得到视差作用，这是由于collapseMode，它有三种形式：parallax , pin , none。collapseMode默以为CollapseMode.parallax，假如将其设置为pin，那么你将不会得到视差作用，只要简略的淡入淡出。

flexibleSpace: FlexibleSpaceBar(
  title: Text("First FlexibleSpace",style: TextStyle(color: Colors.black),),
  collapseMode: CollapseMode.pin,
  background: Image.network(
      "https://p3-passport.byteimg.com/img/user-avatar/af5f7ee5f0c449f25fc0b32c050bf100~180x180.awebp",
      fit: BoxFit.cover),
),

CollapseMode.parallax	CollapseMode.pin

stretch

运用该特点前，需求先设置CustomScrollView的physics，给它一个弹性作用，在翻滚到内容止境时依然运转翻滚。stretch特点设置为true时，会让 FlexibleSpaceBar 与外部组件同步翻滚。

SliverAppBar(
  expandedHeight: 200,
  pinned: true,
  stretch: true,
  flexibleSpace: FlexibleSpaceBar(
    title: Text("First FlexibleSpace",style: TextStyle(color: Colors.black),),
    // collapseMode: CollapseMode.pin,
    background: Image.network(
        "https://p3-passport.byteimg.com/img/user-avatar/af5f7ee5f0c449f25fc0b32c050bf100~180x180.awebp",
        fit: BoxFit.cover),
  ),
  actions: <Widget>[
    IconButton(onPressed: () => null, icon: const Icon(Icons.add))
  ],
),

stretch: true	stretch: false

stretchModes

当stretch特点设置为true时，此时会触发FlexibleSpaceBar容器扩大导致的背景图片改变的一个动画作用->stretchModes。stretchModes有三种特点：

• zoomBackground默认作用，扩大背景图片
• blurBackground模糊背景图片
• fadeTitle淡化title

flexibleSpace: FlexibleSpaceBar(
  title: Text("First FlexibleSpace",style: TextStyle(color: Colors.black),),
  // collapseMode: CollapseMode.pin,
  background: Image.network(
      "https://p3-passport.byteimg.com/img/user-avatar/af5f7ee5f0c449f25fc0b32c050bf100~180x180.awebp",
      fit: BoxFit.cover),
  stretchModes: [
    // StretchMode.fadeTitle,
    // StretchMode.blurBackground,
    StretchMode.zoomBackground
  ],
),

zoomBackground	blurBackground	fadeTitle

关于我

Hello，我是Taxze，假如您觉得文章对您有价值，期望您能给我的文章点个❤️，有问题需求联络我的话：我在这里，也能够经过的新的私信功能联络到我。假如您觉得文章还差了那么点东西，也请经过重视催促我写出更好的文章~如果哪天我进步了呢？