《Flutter 控件大全》第八十八：SliverList 和 SliverGrid

• 如果你对Flutter还有疑问或者技术方面的疑惑，欢迎加入Flutter交流群（微信：laomengit）。
• 同时也欢迎关注我的Flutter公众号【老孟程序员】，公众号首发Flutter的相关内容。
• Flutter地址：http://laomengit.com 里面包含160多个组件的详细用法。

要同时滚动ListView和GridView的时候可以使用SliverList和SliverGrid。

SliverList

SliverList的用法非常简单，只需一个构建函数，用法如下：

SliverList(
  delegate: SliverChildBuilderDelegate((content, index) {
    return Container(
      height: 65,
      color: Colors.primaries[index % Colors.primaries.length],
    );
  }, childCount: 5),
)

SliverGrid

同样SliverGrid的用法如下：

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

此时需要将SliverList和SliverGrid放在一起，使用CustomScrollView，用法如下：

CustomScrollView(slivers: <Widget>[
  SliverList(
    delegate: SliverChildBuilderDelegate((content, index) {
      return Container(
        height: 65,
        color: Colors.primaries[index % Colors.primaries.length],
      );
    }, childCount: 5),
  ),
  SliverGrid(
    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 3, crossAxisSpacing: 5, mainAxisSpacing: 3),
    delegate: SliverChildBuilderDelegate((BuildContext context, int index) {
      return Container(
        color: Colors.primaries[index % Colors.primaries.length],
      );
    }, childCount: 20),
  )
])

效果如下：

查看专栏详情 立即解锁全部专栏