Flutter构建页面出现RenderFlex底部溢出28像素报错如何解决

这个溢出是两个布局逻辑错误共同导致的：

• Expanded组件使用场景错误：Expanded仅能作为Row/Column这类非滚动Flex容器的直接子组件，作用是按权重瓜分父容器的剩余固定高度。你的外层是CustomScrollView滚动容器，SliverFillRemaining会强制子组件填满当前视口的剩余高度，3个套了Expanded的ThemeList加上间距、内部标题、列表项的高度总和超过视口可用高度时，就会触发底部溢出。
• 滚动逻辑冲突：你原本想实现整个页面统一滚动，但没有禁用内部ListView.builder的独立滚动，同时SliverFillRemaining的拉伸特性和自适应高度的列表需求完全矛盾。
  另外你贴的代码里var nameTheme = itemAppTheme.toString()行尾缺少分号，会触发语法报错，修复时可以一并补上。

1. 移除ThemeList最外层包裹的Expanded，让组件根据内部内容自适应高度，不再强行占用剩余视口空间。
2. 给ThemeList内部的ListView.builder添加physics: const NeverScrollableScrollPhysics()属性，禁用内部列表的独立滚动，把滚动控制权完全交给外层的CustomScrollView，避免滑动冲突。
3. 把外层CustomScrollView里的SliverFillRemaining替换为SliverToBoxAdapter，不需要强制子组件填满视口，让内容按实际高度布局，超出视口时自然触发滚动。

页面外层body部分 #

body: CustomScrollView(slivers: [
  SliverToBoxAdapter(
    child: Column(
      children: const [
        ThemeList(),
        SizedBox(height: 8),
        ThemeList(),
        SizedBox(height: 8),
        ThemeList(),
        SizedBox(height: 16), // 增加底部边距避免最后一个模块贴边
      ],
    ),
  ),
]),

ThemeList组件build方法 #

@override
Widget build(BuildContext context) {
  return Padding(
    padding: const EdgeInsets.all(10),
    child: Container(
      decoration: BoxDecoration(
        border: Border.all(color: Theme.of(context).primaryColor, width: 2),
        borderRadius: BorderRadius.circular(10),
      ),
      child: Column(
        children: <Widget>[
          Row(
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.only(top: 5, left: 20),
                child: Text(
                  AppLocalizations.of(context)!.settingsThemeSubTitle,
                  style: const TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: 23,
                  ),
                ),
              )
            ],
          ),
          ListView.builder(
            shrinkWrap: true,
            physics: const NeverScrollableScrollPhysics(),
            padding: const EdgeInsets.all(8),
            itemCount: AppTheme.values.length,
            itemBuilder: (context, index) {
              final itemAppTheme = AppTheme.values[index];
              var nameTheme = itemAppTheme.toString(); // 补全缺失的分号
              return Card(
                color: appThemeData[itemAppTheme]?.primaryColor,
                child: ListTile(
                  title: Text(
                    nameTheme,
                    style: appThemeData[itemAppTheme]?.textTheme.bodyText1,
                  ),
                  onTap: () {
                    BlocProvider.of<ThemeBloc>(context).add(
                      ThemeChanged(theme: itemAppTheme),
                    );
                    Preferences.saveTheme(itemAppTheme);
                  },
                ),
              );
            },
          )
        ],
      ),
    ),
  );
}

修改后整个页面由外层CustomScrollView统一控制滚动，每个主题模块按内容自适应高度，不会再出现溢出问题，布局效果和预期参考图一致。

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