Flutter 常用滚动组件使用场景

1. 使用 SingleChildScrollView

如果页面的内容较少并且你希望整体可滚动，可以使用 SingleChildScrollView 来包裹页面的所有内容。

示例：

SingleChildScrollView(
  child: Column(
    children: [
      Container(
        height: 200,
        color: Colors.blue,
        child: const Center(child: Text('部分内容')),
      ),
      Container(
        height: 200,
        color: Colors.green,
        child: const Center(child: Text('其他内容')),
      ),
      // 可以继续添加更多内容
    ],
  ),
)

2. 使用 ListView

如果你的内容是一个列表项，ListView 是最适合的滚动组件。ListView 会根据列表项的数量自动滚动，可以通过 ListView.builder 来动态构建列表项。

示例：

ListView(
  children: [
    Container(
      height: 200,
      color: Colors.blue,
      child: const Center(child: Text('部分内容')),
    ),
    Container(
      height: 200,
      color: Colors.green,
      child: const Center(child: Text('其他内容')),
    ),
    // 可以继续添加更多内容
  ],
)

3. 混合使用滚动组件

你可以根据页面布局需求，结合 SingleChildScrollView 和 ListView 等进行嵌套使用。

示例：

SingleChildScrollView(
  child: Column(
    children: [
      Container(
        height: 200,
        color: Colors.blue,
        child: const Center(child: Text('顶部内容')),
      ),
      ListView.builder(
        shrinkWrap: true,  // 设置为 true 让 ListView 在嵌套滚动时不占据全部空间
        physics: NeverScrollableScrollPhysics(),  // 禁止内嵌的 ListView 滚动
        itemCount: 10,
        itemBuilder: (context, index) {
          return Container(
            height: 100,
            color: Colors.orange,
            child: Center(child: Text('列表项 $index')),
          );
        },
      ),
      Container(
        height: 200,
        color: Colors.green,
        child: const Center(child: Text('底部内容')),
      ),
    ],
  ),
)

4. 滚动时禁用顶部栏（SliverAppBar）

如果页面有一个动态的顶部栏（例如 SliverAppBar），可以通过使用 CustomScrollView 来实现与滚动内容的配合。

示例：

CustomScrollView(
  slivers: [
    SliverAppBar(
      expandedHeight: 200.0,
      floating: true,
      pinned: true,
      flexibleSpace: FlexibleSpaceBar(
        title: Text('标题'),
        background: Image.network('https://example.com/image.jpg', fit: BoxFit.cover),
      ),
    ),
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) {
          return Container(
            height: 100,
            color: Colors.orange,
            child: Center(child: Text('列表项 $index')),
          );
        },
        childCount: 50,
      ),
    ),
  ],
)

小结：

• SingleChildScrollView：适用于页面内容较少的场景。
• ListView：适用于有多个列表项且需要滚动的场景。
• CustomScrollView ：适用于结合 SliverAppBar 或自定义滚动效果的场景。