Flutter底部导航栏报错：'owner!._debugCurrentBuildTarget == this'断言失败

这个断言错误的核心原因就是你排查到的——在HomePage的页面列表中重复实例化了HomePage自身，导致组件构建时无限递归调用，触发Flutter的构建检测断言。

解决步骤 #

• 拆分独立页面组件：把底部导航要切换的每个页面封装成单独的Widget（比如首页、发现页、我的页），不要直接嵌套HomePage。
• 修正页面列表：将_items列表中的HomePage替换为这些独立组件。
• 确保body加载正确页面：body: _items[_selectedIndex]现在指向的是独立页面，而非HomePage自身。

代码示例 #

错误代码片段（问题根源）

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _selectedIndex = 0;
  final List<Widget> _items = [
    HomePage(), // 错误：再次实例化HomePage，引发无限递归
    const DiscoverScreen(),
    const ProfileScreen(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _items[_selectedIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _selectedIndex,
        onTap: (index) => setState(() => _selectedIndex = index),
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: '首页'),
          BottomNavigationBarItem(icon: Icon(Icons.search), label: '发现'),
          BottomNavigationBarItem(icon: Icon(Icons.person), label: '我的'),
        ],
      ),
    );
  }
}

修正后的代码

// 先定义独立的页面组件
class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const Center(child: Text('首页'));
  }
}

class DiscoverScreen extends StatelessWidget {
  const DiscoverScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const Center(child: Text('发现页'));
  }
}

class ProfileScreen extends StatelessWidget {
  const ProfileScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const Center(child: Text('我的页'));
  }
}

// 主页面HomePage
class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _selectedIndex = 0;
  final List<Widget> _items = const [
    HomeScreen(), // 替换为独立页面组件
    DiscoverScreen(),
    ProfileScreen(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _items[_selectedIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _selectedIndex,
        onTap: (index) => setState(() => _selectedIndex = index),
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: '首页'),
          BottomNavigationBarItem(icon: Icon(Icons.search), label: '发现'),
          BottomNavigationBarItem(icon: Icon(Icons.person), label: '我的'),
        ],
      ),
    );
  }
}

修改后，HomePage的body只会加载独立的子页面组件，不会再触发自身的重复构建，彻底解决无限递归导致的断言错误，同时正常实现底部导航的页面切换功能。

内容的提问来源于stack exchange，提问作者Tae Hyung Kim