Flutter CustomScrollView Widget使用详解

Flutter CustomScrollView Widget 是一个强大的组件，它提供了一个可滚动的视图，可以自定义滚动行为和外观。CustomScrollView 可以包含多种滚动模型，例如列表、网格、流式布局等。CustomScrollView 是一个灵活的组件，可以根据需要添加多个滚动模型，而且还支持添加自定义滚动效果。

下面是 CustomScrollView 的一些用法和示例：

1.添加一个滚动列表

要添加一个简单的滚动列表，可以使用 SliverList。以下是一个示例代码：

CustomScrollView(
  slivers: [
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) {
          return ListTile(
            title: Text('Item $index'),
          );
        },
        childCount: 50,
      ),
    ),
  ],
)

在这个例子中，我们将一个 SliverList 添加到 CustomScrollView 中。SliverList 接受一个 SliverChildBuilderDelegate，它会构建一个包含指定数量子控件的列表。

2.添加一个网格

要添加一个网格，可以使用 SliverGrid。以下是一个示例代码：

CustomScrollView(
  slivers: [
    SliverGrid(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        crossAxisSpacing: 10.0,
        mainAxisSpacing: 10.0,
        childAspectRatio: 1.0,
      ),
      delegate: SliverChildBuilderDelegate(
        (context, index) {
          return Container(
            color: Colors.blueGrey,
            child: Center(
              child: Text('Item $index'),
            ),
          );
        },
        childCount: 20,
      ),
    ),
  ],
)

在这个例子中，我们将一个 SliverGrid 添加到 CustomScrollView 中。SliverGridDelegateWithFixedCrossAxisCount 用于指定网格的行数和列数。SliverChildBuilderDelegate 用于构建网格的子控件。

3.添加自定义的滚动效果

CustomScrollView 还支持添加自定义的滚动效果。以下是一个示例代码：

CustomScrollView(
  physics: BouncingScrollPhysics(),
  slivers: [
    SliverAppBar(
      pinned: true,
      expandedHeight: 200.0,
      flexibleSpace: FlexibleSpaceBar(
        title: Text('Custom Scroll View'),
        background: Image.network(
          'https://picsum.photos/200/300',
          fit: BoxFit.cover,
        ),
      ),
    ),
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) {
          return ListTile(
            title: Text('Item $index'),
          );
        },
        childCount: 50,
      ),
    ),
  ],
)

在这个例子中，我们将 CustomScrollView 的 physics 属性设置为 BouncingScrollPhysics，它会添加一个弹性滚动效果。我们还添加了一个 SliverAppBar，它会固定在屏幕顶部，并在用户向下滚动时折叠。SliverAppBar 的 flexibleSpace 属性设置为一个 FlexibleSpaceBar，它包含一个标题和一张图片。