Flutter滚动时固定中间Widget至顶部的实现方案求助

针对你遇到的场景，我们可以通过CustomScrollView结合Sliver系列组件来实现，完全不需要给高度不确定的Widget1指定固定高度，具体实现思路如下：

• 用CustomScrollView作为页面根组件，统一管理整个页面的滚动行为
• 将高度不确定的Widget1（Column）放入SliverList中，Sliver组件会自动适配内容高度，无需手动指定
• 用SliverPersistentHeader包裹Widget2，并设置pinned: true，这样滚动到顶部时Widget2会自动固定
• 将FutureBuilder中的ListView转换为Sliver组件，适配CustomScrollView的Sliver体系

完整实现代码 #

import 'package:flutter/material.dart';

class ScrollFixedDemo extends StatefulWidget {
  const ScrollFixedDemo({super.key});

  @override
  State<ScrollFixedDemo> createState() => _ScrollFixedDemoState();
}

class _ScrollFixedDemoState extends State<ScrollFixedDemo> {
  // 模拟异步获取列表数据
  Future<List<String>> _loadListData() async {
    await Future.delayed(const Duration(seconds: 1));
    return List.generate(60, (index) => "列表条目 $index");
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          // 高度自适应的Widget1（Column）
          SliverList(
            delegate: SliverChildListDelegate(
              [
                Container(
                  color: Colors.lightBlue[50],
                  padding: const EdgeInsets.all(16),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: const [
                      Text(
                        "高度不确定的Widget1",
                        style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
                      ),
                      SizedBox(height: 12),
                      Text(
                        "这里可以放入任意动态内容：多行文本、网络图片、动态生成的组件等，高度完全由内容决定，不需要手动设置固定值。",
                        style: TextStyle(fontSize: 16),
                      ),
                      SizedBox(height: 16),
                      Image(
                        image: NetworkImage("https://picsum.photos/400/200"),
                        fit: BoxFit.cover,
                      ),
                      SizedBox(height: 16),
                      Text("更多动态内容，高度自适应"),
                    ],
                  ),
                ),
              ],
            ),
          ),
          // 滚动后固定在顶部的Widget2
          SliverPersistentHeader(
            pinned: true,
            delegate: _FixedHeaderDelegate(
              child: Container(
                color: Colors.deepOrange,
                padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
                child: const Text(
                  "我是滚动后固定的Widget2",
                  style: TextStyle(color: Colors.white, fontSize: 18),
                ),
              ),
            ),
          ),
          // FutureBuilder包裹的列表内容，转为SliverList
          SliverToBoxAdapter(
            child: FutureBuilder<List<String>>(
              future: _loadListData(),
              builder: (context, snapshot) {
                if (snapshot.connectionState == ConnectionState.waiting) {
                  return const SizedBox(
                    height: 300,
                    child: Center(child: CircularProgressIndicator()),
                  );
                } else if (snapshot.hasError) {
                  return const SizedBox(
                    height: 200,
                    child: Center(child: Text("加载失败，请稍后重试")),
                  );
                } else if (!snapshot.hasData || snapshot.data!.isEmpty) {
                  return const SizedBox(
                    height: 200,
                    child: Center(child: Text("暂无数据")),
                  );
                }

                // 将原ListView转换为SliverList，适配CustomScrollView
                return SliverList(
                  delegate: SliverChildBuilderDelegate(
                    (context, index) {
                      return ListTile(
                        leading: const Icon(Icons.list_alt),
                        title: Text(snapshot.data![index]),
                        subtitle: const Text("这是列表的子内容"),
                      );
                    },
                    childCount: snapshot.data!.length,
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}

// 自定义SliverPersistentHeaderDelegate，实现Widget2的固定逻辑
class _FixedHeaderDelegate extends SliverPersistentHeaderDelegate {
  final Widget child;

  _FixedHeaderDelegate({required this.child});

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

  // 如果Widget2高度不确定，可以通过GlobalKey获取渲染高度后动态设置
  @override
  double get maxExtent => 56;

  @override
  double get minExtent => maxExtent;

  @override
  bool shouldRebuild(covariant _FixedHeaderDelegate oldDelegate) {
    return oldDelegate.child != child;
  }
}

额外说明 #

如果Widget2的高度也不确定，可以通过以下方式动态获取：

1. 给Widget2添加GlobalKey
2. 在initState中监听组件渲染完成，通过globalKey.currentContext?.size?.height获取高度
3. 动态更新_FixedHeaderDelegate的maxExtent和minExtent值

内容的提问来源于stack exchange，提问作者Mitul Agrawal