如何基于Slivers实现CustomScrollView的自适应居中与滚动布局？

完全可以在保留Slivers特性的前提下实现需求，核心思路是利用组件的自适应特性，让内容在屏幕空间充足时自动居中，超出时保持正常滚动。

方案一：简洁实现（兼容滚动特性） #

return Scaffold(
  body: CustomScrollView(
    physics: const AlwaysScrollableScrollPhysics(
      parent: BouncingScrollPhysics(),
    ),
    controller: controller,
    slivers: [
      SliverFillRemaining(
        hasScrollBody: false,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 标题部分
            Padding(
              padding: const EdgeInsets.symmetric(vertical: 64),
              child: Text(
                'Title',
                style: theme.textTheme.titleLarge?.copyWith(
                  fontWeight: FontWeight.bold,
                  color: theme.colorScheme.onPrimary,
                ),
              ),
            ),
            // 列表部分：Expanded确保内容超出时可滚动
            Expanded(
              child: ListView.builder(
                shrinkWrap: true,
                physics: const AlwaysScrollableScrollPhysics(
                  parent: BouncingScrollPhysics(),
                ),
                itemCount: tiles.length,
                itemBuilder: (context, index) {
                  final text = tiles[index];
                  return Card(
                    margin: const EdgeInsets.symmetric(
                      horizontal: 24,
                      vertical: 8,
                    ),
                    child: ListTile(
                      title: Text(
                        text,
                        style: theme.textTheme.bodyLarge,
                      ),
                    ),
                  );
                },
              ),
            ),
          ],
        ),
      ),
    ],
  ),
);

关键说明

• SliverFillRemaining：设置hasScrollBody: false后，内容高度小于屏幕时自动填充剩余空间，配合Column的居中属性让整体内容居中；内容超出屏幕时，自动切换为可滚动状态。
• 保留Slivers特性：整个内容作为单个Sliver嵌入CustomScrollView，标题会随列表同步滚动，原有的回弹效果完全保留。

方案二：纯Sliver组件实现 #

如果坚持完全使用原生Sliver组件，可通过动态计算高度添加自适应padding实现：

final GlobalKey _sliverListKey = GlobalKey();
double? _totalContentHeight;

@override
void initState() {
  super.initState();
  // 组件渲染后计算内容总高度
  WidgetsBinding.instance.addPostFrameCallback((_) {
    final listRender = _sliverListKey.currentContext?.findRenderObject() as RenderBox?;
    const titleHeight = 128; // 标题固定上下padding总和
    _totalContentHeight = titleHeight + (listRender?.size.height ?? 0);
    setState(() {});
  });
}

@override
Widget build(BuildContext context) {
  final theme = Theme.of(context);
  final screenHeight = MediaQuery.of(context).size.height;
  
  return Scaffold(
    body: CustomScrollView(
      physics: const AlwaysScrollableScrollPhysics(parent: BouncingScrollPhysics()),
      controller: controller,
      slivers: [
        // 顶部自适应padding
        SliverPadding(
          padding: EdgeInsets.only(
            top: _totalContentHeight != null && _totalContentHeight! < screenHeight
                ? (screenHeight - _totalContentHeight!) / 2
                : 0,
          ),
          sliver: SliverToBoxAdapter(
            child: Center(
              child: Padding(
                padding: const EdgeInsets.symmetric(vertical: 64),
                child: Text(
                  'Title',
                  style: theme.textTheme.titleLarge?.copyWith(
                    fontWeight: FontWeight.bold,
                    color: theme.colorScheme.onPrimary,
                  ),
                ),
              ),
            ),
          ),
        ),
        // 原列表Sliver
        SliverList.builder(
          key: _sliverListKey,
          itemCount: tiles.length,
          itemBuilder: (context, index) {
            final text = tiles[index];
            return Card(
              margin: const EdgeInsets.symmetric(horizontal: 24, vertical: 8),
              child: ListTile(
                title: Text(text, style: theme.textTheme.bodyLarge),
              ),
            );
          },
        ),
        // 底部自适应padding
        SliverPadding(
          padding: EdgeInsets.only(
            bottom: _totalContentHeight != null && _totalContentHeight! < screenHeight
                ? (screenHeight - _totalContentHeight!) / 2
                : 0,
          ),
          sliver: const SliverToBoxAdapter(child: SizedBox.shrink()),
        ),
      ],
    ),
  );
}

关键说明

• 通过GlobalKey获取列表实际高度，结合固定标题高度计算总内容高度。
• 对比屏幕高度动态设置上下SliverPadding，实现内容不足时居中，超出时正常滚动。
• 完全保留Sliver组件特性，标题滚动、回弹效果均不受影响。

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