Flutter 滚动控件篇-->GridView、CustomScrollView

前言

在上一篇文章中，我们介绍了Flutter中的ListView控件。在本文中，我们将介绍另外两个重要的滚动控件：GridView和CustomScrollView。

GridView

GridView可以构建一个二维网格列表。它与ListView的不同之处在于，ListView只能构建一维列表，而GridView可以构建二维列表。

GridView的属性与ListView非常相似，主要区别在于GridView多了以下几个属性：

• crossAxisCount：网格中每行的列数。
• mainAxisSpacing：网格中相邻项目之间的水平间距。
• crossAxisSpacing：网格中相邻项目之间的垂直间距。
• childAspectRatio：网格中每个项目的高宽比。

CustomScrollView

CustomScrollView是一个非常灵活的滚动控件，它允许我们创建各种自定义的滚动效果。

CustomScrollView的子组件可以是任何类型的控件，包括ListView、GridView、SliverList、SliverGrid等。我们可以通过组合不同的子组件来创建各种自定义的滚动效果。

总结

GridView和CustomScrollView都是非常强大的滚动控件，它们可以帮助我们创建各种复杂的滚动效果。

在实际开发中，我们经常会用到这些控件。因此，掌握这些控件的使用方法是非常重要的。

附录

GridView示例

GridView.count(
  crossAxisCount: 2,
  mainAxisSpacing: 10.0,
  crossAxisSpacing: 10.0,
  childAspectRatio: 1.0,
  children: <Widget>[
    Container(
      color: Colors.red,
      height: 100.0,
    ),
    Container(
      color: Colors.green,
      height: 100.0,
    ),
    Container(
      color: Colors.blue,
      height: 100.0,
    ),
    Container(
      color: Colors.yellow,
      height: 100.0,
    ),
  ],
);

CustomScrollView示例

CustomScrollView(
  slivers: <Widget>[
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (BuildContext context, int index) {
          return Container(
            color: Colors.red,
            height: 100.0,
          );
        },
        childCount: 10,
      ),
    ),
    SliverGrid(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        mainAxisSpacing: 10.0,
        crossAxisSpacing: 10.0,
      ),
      delegate: SliverChildBuilderDelegate(
        (BuildContext context, int index) {
          return Container(
            color: Colors.green,
            height: 100.0,
          );
        },
        childCount: 10,
      ),
    ),
  ],
);