Flutter如何让顶部Row跟随StreamBuilder内的ListView同步滚动

你当前结构中，顶部操作Row和可滚动的StreamBuilder区域为同级节点，仅后者被Flexible包裹处于可滚动范围内，因此滚动时顶部Row会固定在Column顶部，不会跟随移动。将顶部Row和列表内容放入同一滚动容器，禁用内部ListView独立滚动能力，统一由外层容器控制滚动即可实现需求，两种适配方案如下：

方案1：SingleChildScrollView 快速适配（适合列表项较少的场景） #

调整后组件层级：

Scaffold
  - SingleChildScrollView // 新增外层统一滚动容器
    - Column
      - Row // 原顶部操作Row移入滚动容器内
        - Dropdown button
        - Elevated button
      - StreamBuilder // 移除外层Flexible包裹
        - Stack
          - ListView
            * shrinkWrap: true
            * physics: NeverScrollableScrollPhysics()

示例代码：

Scaffold(
  appBar: AppBar(title: const Text("页面标题")),
  body: SingleChildScrollView(
    child: Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        // 顶部操作栏
        Row(
          children: [
            DropdownButton<String>(
              items: const [DropdownMenuItem(value: "1", child: Text("选项1"))],
              onChanged: (val) {},
            ),
            ElevatedButton(onPressed: () {}, child: const Text("操作按钮"))
          ],
        ),
        // 列表区域
        StreamBuilder(
          stream: yourDataStream, // 替换为你的Stream实例
          builder: (context, snapshot) {
            if (!snapshot.hasData) return const CircularProgressIndicator();
            return Stack(
              children: [
                ListView.builder(
                  shrinkWrap: true,
                  physics: const NeverScrollableScrollPhysics(),
                  itemCount: snapshot.data.length,
                  itemBuilder: (context, index) {
                    return ListTile(title: Text(snapshot.data[index].toString()));
                  },
                )
              ],
            );
          },
        )
      ],
    ),
  ),
)

方案2：CustomScrollView 性能优化（适合列表项较多的场景） #

避免shrinkWrap全量遍历列表项带来的性能损耗，使用Sliver系列组件实现：
调整后组件层级：

Scaffold
  - CustomScrollView
    - SliverToBoxAdapter
      - Row
        - Dropdown button
        - Elevated button
    - StreamBuilder
      - SliverList

示例代码：

Scaffold(
  appBar: AppBar(title: const Text("页面标题")),
  body: CustomScrollView(
    slivers: [
      // 顶部操作栏
      SliverToBoxAdapter(
        child: Row(
          children: [
            DropdownButton<String>(
              items: const [DropdownMenuItem(value: "1", child: Text("选项1"))],
              onChanged: (val) {},
            ),
            ElevatedButton(onPressed: () {}, child: const Text("操作按钮"))
          ],
        ),
      ),
      // 列表区域
      StreamBuilder(
        stream: yourDataStream,
        builder: (context, snapshot) {
          if (!snapshot.hasData) return const SliverToBoxAdapter(child: CircularProgressIndicator());
          return SliverList(
            delegate: SliverChildBuilderDelegate(
              (context, index) => ListTile(title: Text(snapshot.data[index].toString())),
              childCount: snapshot.data.length,
            ),
          );
        },
      )
    ],
  ),
)

内容的提问来源于stack exchange，提问作者Adrian Alejo