Flutter底部导航栏点击崩溃，布局出现无限尺寸异常

问题现象 #

点击导航图标时页面卡顿无响应，多次点击导致应用崩溃，控制台抛出RenderCustomMultiChildLayoutBox在布局时被赋予无限尺寸错误；导航到AddMentor页面必触发该错误，默认首页改为其他页面才能正常运行。

核心原因 #

1. 无限递归嵌套：bodys列表中添加了const traineeProfileScreen()，而traineeProfileScreen的body()方法又会渲染bodys[_currentIndex]，当底部导航栏切换到对应索引时，会无限递归创建traineeProfileScreen实例，导致布局尺寸无限膨胀。
2. 布局结构错误：将所有页面内容（包括其他完整页面）嵌套在traineeProfileScreen的SingleChildScrollView和Column中，导致页面叠加、布局约束冲突，触发无限尺寸断言。
3. 导航逻辑混淆：traineeProfileScreen既作为导航目标页面，又作为包含底部导航栏的容器，职责混乱，引发布局和状态管理问题。

解决方案 #

1. 重构导航结构 #

创建独立的主导航容器页面，专门负责底部导航和页面切换；traineeProfileScreen作为单一页面存在，不再承担导航容器的职责。

2. 移除递归引用 #

删除bodys列表中的traineeProfileScreen实例，避免无限递归创建组件。

3. 修正布局逻辑 #

让Scaffold的body直接返回当前选中的页面，不再将其他页面嵌套在traineeProfileScreen的内容中。

修改后的代码示例 #

主导航容器页面

import 'package:flutter/material.dart';
import 'package:senior_app/view/addMentor.dart';
import 'package:senior_app/view/dahsboardScreen.dart';
import 'package:senior_app/view/searchScreen.dart';
import 'package:senior_app/view/traineeProfileScreen.dart';

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

  @override
  State<MainNavigationScreen> createState() => _MainNavigationScreenState();
}

class _MainNavigationScreenState extends State<MainNavigationScreen> {
  int _currentIndex = 0;

  // 页面列表：移除递归引用，每个页面都是独立组件
  final List<Widget> _pages = const [
    dashboardScreen(),
    traineeProfileScreen(),
    searchScreen(),
    addMentor(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      // 根据当前页面动态生成AppBar
      appBar: _buildAppBar(),
      endDrawer: _buildDrawer(),
      // 直接渲染当前选中的页面
      body: _pages[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: (int newIndex) {
          setState(() {
            _currentIndex = newIndex;
          });
        },
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.home, color: Colors.grey),
            label: 'Home',
            backgroundColor: Colors.white,
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.dashboard, color: Colors.grey),
            label: 'Dashboard',
            backgroundColor: Colors.white,
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.search, color: Colors.grey),
            label: 'Search',
            backgroundColor: Colors.white,
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person, color: Colors.grey),
            label: 'Profile',
            backgroundColor: Colors.white,
          ),
        ],
        selectedItemColor: Colors.amber[800],
      ),
    );
  }

  AppBar _buildAppBar() {
    switch (_currentIndex) {
      case 0:
        return AppBar(title: const Text('Home'));
      case 1:
        return AppBar(title: const Text('Profile'));
      case 2:
        return AppBar(title: const Text('Search'));
      case 3:
        return AppBar(title: const Text('Add Mentor'));
      default:
        return AppBar(title: const Text('Senior App'));
    }
  }

  Widget _buildDrawer() {
    return Drawer(
      child: ListView(
        padding: EdgeInsets.zero,
        children: const [
          DrawerHeader(
            decoration: BoxDecoration(color: Colors.blue),
            child: Text('Menu'),
          ),
          // 可添加抽屉菜单项
        ],
      ),
    );
  }
}

独立的traineeProfileScreen页面

import 'package:flutter/material.dart';
import 'package:senior_app/view/traineeInfoScreen.dart';
import 'package:senior_app/view/traineeRegistrationScreen.dart';

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

  @override
  State<traineeProfileScreen> createState() => _traineeProfileScreenState();
}

class _traineeProfileScreenState extends State<traineeProfileScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      body: _buildProfileContent(),
    );
  }

  SingleChildScrollView _buildProfileContent() {
    return SingleChildScrollView(
      child: SafeArea(
        child: Column(
          verticalDirection: VerticalDirection.down,
          children: [
            const CircleAvatar(
              radius: 80,
              backgroundImage: AssetImage('images/avatar.png'),
            ),
            Text(
              traineeInfoScreen.name,
              style: const TextStyle(
                fontSize: 20,
                color: Colors.black,
              ),
            ),
            const SizedBox(height: 50),
            // 公共信息区域
            Container(
              alignment: Alignment.topLeft,
              margin: const EdgeInsets.fromLTRB(100, 0, 0, 0),
              child: const Text(
                "Public Information",
                style: TextStyle(
                    fontSize: 20,
                    color: Colors.green,
                    fontWeight: FontWeight.normal),
              ),
            ),
            Card(
              color: Colors.white,
              margin: const EdgeInsets.fromLTRB(100, 10, 100, 10),
              child: ListTile(
                leading: const Icon(Icons.abc),
                title: Text(traineeInfoScreen.name),
                subtitle: const Text("name"),
                trailing: IconButton(
                  onPressed: () {},
                  icon: const Icon(Icons.edit_outlined),
                ),
              ),
            ),
            // 其余卡片内容保留原逻辑，略去重复代码
            Card(
              color: Colors.white,
              margin: const EdgeInsets.fromLTRB(100, 10, 100, 10),
              child: ListTile(
                leading: const Icon(Icons.card_giftcard),
                title: const Text("License"),
                subtitle: traineeInfoScreen.image3 != null
                    ? Container(
                        height: 200,
                        width: 200,
                        child: traineeInfoScreen.image3,
                      )
                    : const Text(
                        "No Image",
                        style: TextStyle(fontSize: 20),
                      ),
                trailing: IconButton(
                  onPressed: () {},
                  icon: const Icon(Icons.edit_outlined),
                ),
              ),
            ),
            // 移除原有的bodys[_currentIndex]，页面切换由主导航容器负责
          ],
        ),
      ),
    );
  }
}

关键修改说明 #

1. 职责分离：主导航容器负责页面切换和底部导航栏管理，每个页面只专注于自身UI展示，避免逻辑混乱。
2. 消除递归：彻底移除页面间的循环引用，解决无限创建组件导致的布局崩溃。
3. 布局解耦：每个页面独立渲染，不再嵌套其他完整页面，修复布局约束冲突，解决无限尺寸断言错误。

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