Flutter如何实现：固定顶部容器，其余组件联动滚动后ListView单独滚动

要实现你描述的滚动效果，需要使用CustomScrollView配合Sliver系列组件替代原有的Column+ListView结构，这样能让红色、绿色容器和列表先联动滚动，待前两个容器滚出视图后，列表单独滚动，同时保持顶部Welcome容器固定。

完整实现代码 #

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  // 初始化测试数据
  List<String> mydata = List.generate(50, (index) => '列表项 $index');

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: CustomScrollView(
          slivers: [
            // 固定在顶部的Welcome容器
            SliverPersistentHeader(
              pinned: true,
              delegate: _FixedHeaderDelegate(
                child: Container(
                  height: 50,
                  color: Colors.white, // 设置背景色防止滚动时下方内容穿透
                  child: const Center(child: Text('Welcome')),
                ),
              ),
            ),
            // 红色容器（转为Sliver组件实现联动滚动）
            SliverToBoxAdapter(
              child: Container(
                height: 100,
                color: Colors.red,
              ),
            ),
            // 绿色容器（转为Sliver组件实现联动滚动）
            SliverToBoxAdapter(
              child: Container(
                height: 200,
                color: Colors.green,
              ),
            ),
            // 列表部分，替代原ListView.builder
            SliverList(
              delegate: SliverChildBuilderDelegate(
                (context, index) {
                  return ListTile(
                    title: Text(mydata[index]),
                    leading: const CircleAvatar(),
                  );
                },
                childCount: mydata.length,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

// 自定义固定头部代理类，控制顶部容器的固定逻辑
class _FixedHeaderDelegate extends SliverPersistentHeaderDelegate {
  final Widget child;

  _FixedHeaderDelegate({required this.child});

  @override
  Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
    return child;
  }

  @override
  double get maxExtent => 50; // 头部最大高度

  @override
  double get minExtent => 50; // 头部最小高度（固定时的高度）

  @override
  bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) {
    return false;
  }
}

关键组件说明 #

• SliverPersistentHeader：通过pinned: true参数让Welcome容器始终固定在顶部，不会随滚动消失。
• SliverToBoxAdapter：将普通的Container包装成Sliver组件，使其能和其他Sliver组件一起在CustomScrollView中联动滚动。
• SliverList：替代原有的ListView.builder，作为CustomScrollView的一部分，当红、绿容器完全滚出屏幕后，它会进入单独滚动状态。

这种结构完美契合你的需求：向上滚动时红色、绿色容器和列表同步上移；当红绿色容器全部离开视图后，列表开始独立滚动，而顶部的Welcome容器始终保持可见。

内容的提问来源于stack exchange，提问作者Irfan Ganatra