Flutter添加BottomBar报错RenderRepaintBoundary无限布局问题修复

你把完整的Scaffold组件（BottomBar内部嵌套了Scaffold）放入了ListView的子项中，这是问题核心：

• ListView的垂直方向是无界约束（高度可无限延伸）
• BottomBar里的Scaffold会尝试占满父容器的全部可用空间
• 两者结合导致布局系统无法确定BottomBar的具体高度，触发无限尺寸错误

步骤1：重构BottomBar组件，移除外层Scaffold #

让BottomBar只返回BottomNavigationBar组件，不要嵌套完整Scaffold：

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

  @override
  State<BottomBar> createState() => _BottomBarState();
}

class _BottomBarState extends State<BottomBar> {
  int _selectedIndex = 0;
  // 保留页面切换的目标组件，后续通过路由或状态管理切换
  final List<Widget> _widgetOptions = const [
    Text("首页"),
    Text("页面1"),
    Text("页面2"),
    Text("页面3")
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
      // 这里可添加页面切换逻辑，比如Navigator.push或状态管理跳转
    });
  }

  @override
  Widget build(BuildContext context) {
    // 直接返回BottomNavigationBar，不再包裹Scaffold
    return BottomNavigationBar(
      currentIndex: _selectedIndex,
      onTap: _onItemTapped,
      elevation: 10,
      items: const [
        BottomNavigationBarItem(icon: Icon(Icons.home), label: "首页"),
        BottomNavigationBarItem(icon: Icon(Icons.search), label: "搜索"),
        BottomNavigationBarItem(icon: Icon(Icons.favorite), label: "收藏"),
        BottomNavigationBarItem(icon: Icon(Icons.person), label: "我的"),
      ],
    );
  }
}

步骤2：修改首页代码，将BottomBar固定到Scaffold底部 #

把BottomBar放到首页Scaffold的bottomNavigationBar属性中，而非ListView子项：

@override
Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: Styles.bgColor,
    // 在这里添加BottomBar，自动固定在页面底部
    bottomNavigationBar: const BottomBar(),
    body: ListView(
      children: [
        Container(
          padding: const EdgeInsets.symmetric(horizontal: 20),
          child: Column(
            children: [
              const Gap(40),
              Row(...), // 原Row组件
              const Gap(20),
              Container(...), // 原Container组件
              const Gap(20),
              Container(...), // 原Container组件
              const Gap(20),
              Container(...) // 原Container组件
            ],
          ),
        ),
        const Gap(25),
        // 移除原来放在这里的const BottomBar()
      ],
    ),
  );
}

额外说明 #

如果需要实现页面切换，建议使用Navigator路由跳转或状态管理（如Provider、GetX），不要在BottomBar内部嵌套Scaffold，避免多层Scaffold导致的布局冲突和状态混乱。

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