Flutter体验 Day 16-滚动组件-Sliver

滚动组件-Sliver

若想要自定义滚动效果的介面功能，就需要使用 CustomScrollView 以及 Silvers 的应用结合。我们先看看SmallStoneSK已实作的范例来看看能够达到的滚动效果有哪些。

挑战目标

学习 Widgets

Sliver的概念

Sliver 是什麽？

先前说到滚动组件可以提供一个区块显示可滚动的内容，这个可滚动的内容如果数量很多的时候，我们只能够看到这个可滚动的内容的部份内容。例如我们在 ListView 的范例里，我们可以透过 builder 的建构方法建构了一个无限的列表内容，在滚动的过程里才会动态的创建需要呈现的内容，这个概念就是Sliver的本质。

CustomScrollView 做为 Slivers 组件运行的容器，提供单一滚动的环境，因此在滚动的过程里，只有即将呈现在画面上的 Slivers 才会被处理。

注意 CustomScrollView 子元素只能够是 Slivers 类别的组件。

我们来看一下范例吧，会使用到的 Slivers 如下：

SliverToBoxAdapter
SliverGrid
SliverList
SliverAppBar

SliverToBoxAdapter

CustomScrollView 子元素只能够是 Silver 类别的，因此一般组件需要包装在SliverToBoxAdapter容器内。

SliverGrid

Slivers 中的 GridView，使用delegate属性定义动态的内容，gridDelegate属性定义网格参数。

  Widget _buildGridView() {
    return SliverGrid(
      gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
        maxCrossAxisExtent: 100.0,
      ),
      delegate: SliverChildBuilderDelegate(
        (BuildContext context, int index) {
          return Container(
            alignment: Alignment.center,
            child: Text(index.toString()),
          );
        },
        childCount: 15,
      ),
    );
  }

SliverList

Slivers 中的 ListView，使用delegate属性定义动态的内容，childCount属性定义列的数量。


  Widget _buildListView() {
    return SliverList(
      delegate: SliverChildBuilderDelegate(
        (BuildContext context, int index) {
          // print(index);
          return Container(
            height: 50,
            color: Colors.primaries[(index % 18)],
            child: Center(
              child: Text(
                index.toString(),
              ),
            ),
          );
        },
        childCount: 15,
      ),
    );
  }

SliverAppBar

SliverAppBar可以建立一个浮动的 AppBar 的效果。

 Widget _buildAppBar() {
    return SliverAppBar(
      pinned: true,
      snap: true,
      floating: true,
      expandedHeight: 180.0,
      flexibleSpace: FlexibleSpaceBar(
        title: Text('SliverAppBar'),
        stretchModes: const <StretchMode>[
          StretchMode.zoomBackground,
          StretchMode.blurBackground,
          StretchMode.fadeTitle,
        ],
        background: Container(
          width: double.infinity,
          height: 340,
          decoration: BoxDecoration(
            image: DecorationImage(
              image: AssetImage('assets/images/xFrame.jpg'),
              fit: BoxFit.cover,
            ),
          ),
        ),
      ),
    );
  }

今日成果如下

widget_slivers