为什么我的底部导航栏无法正常工作？

Question

我在 Flutter 中创建了一个包含 bottomnavigationbar 的简单代码，但它不起作用。我的代码如下：

class MainPage extends StatefulWidget{
  @override
  DashboardScreen createState() {
    return DashboardScreen();
  }
}

class DashboardScreen extends State<MainPage> {

Widget callPage(int currentIndex) {
    switch (currentIndex) {
      case 0 : return MainPage();
      case 1 : return SecondPage();
      case 2 : return ThirdPage();
      break;
      default:  MainPage();
    }
  }

  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Dashboard',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Dashboard'),
        ),
        body: callPage(_currentIndex),
    bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        type: BottomNavigationBarType.fixed,
        items: [
          BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: 'Home',
              backgroundColor: Colors.blue
          ),
          BottomNavigationBarItem(
              icon: Icon(Icons.settings),
              label: 'Settings',
              backgroundColor: Colors.blue
          ),
          BottomNavigationBarItem(
              icon: Icon(Icons.account_circle),
              label: 'Profile',
              backgroundColor: Colors.blue
          )
        ],
        onTap: (index) {
            setState((){
              _currentIndex = index;
              print(_currentIndex);
              print("setstate");
            });

        },
      ),
      )
    );
  }

但是现在，当我将它部署到 android 模拟器时，我收到以下错误：

════════ 小部件库捕获的异常 ══════════════════════════════════════════════════ ═════堆栈溢出 相关的导致错误的小部件是：MaterialApp file:///Users/user/AndroidStudioProjects/myapp/lib/dashboard.dart:34:12 ══════════════════════════════════════════════════ ══════════════════════════════════════════════════

════════ 小部件库捕获的异常 ══════════════════════════════════════════════════ ═════ 'package:flutter/src/widgets/framework.dart'：断言失败：行 4345 pos 14：'owner._debugCurrentBuildTarget == this'：不正确。 相关的导致错误的小部件是：MaterialApp file:///Users/user/AndroidStudioProjects/myapp/lib/dashboard.dart:34:12

第 34 行是这样的：

return MaterialApp(

此错误一直附加在控制台中，直到我与设备断开连接。为什么会这样，我怎样才能让我的bottomnavigationbar 工作？谢谢！

Answer 1

有点欺骗您的代码，但失败的原因是因为 MainPage 小部件递归地返回自身。我确实重构了代码并让它在dartpad 中运行。您可以在那里复制、粘贴和运行代码。

cmets 将向您展示陷阱。

import 'package:flutter/material.dart';

// Just the app startup
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MainPage(),
    );
  }
}

// === The main part starts here!

class MainPage extends StatefulWidget{
  @override
  DashboardScreen createState() {
    return DashboardScreen();
  }
}

class DashboardScreen extends State<MainPage> {

Widget callPage(int currentIndex) {
    switch (currentIndex) {
      case 0 : return Container(color: Colors.red); // MainPage() // why? it's
// returning the same widget again recursively...
      case 1 : return Container(color: Colors.blue); // SecondPage()
      case 2 : return Container(color: Colors.green); // ThirdPage()
      break;
      default:  return Container(color: Colors.amber); // HomePage() same mistake here
    }
  }

  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Dashboard'),
        ),
        body: callPage(_currentIndex),
    bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        type: BottomNavigationBarType.fixed,
        items: [
          BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: 'Home',
              backgroundColor: Colors.blue
          ),
          BottomNavigationBarItem(
              icon: Icon(Icons.settings),
              label: 'Settings',
              backgroundColor: Colors.blue
          ),
          BottomNavigationBarItem(
              icon: Icon(Icons.account_circle),
              label: 'Profile',
              backgroundColor: Colors.blue
          )
        ],
        onTap: (index) {
          setState((){
              _currentIndex = index;
              print(_currentIndex);
              print("setstate");
            });

        },
      ),
    );
  }
}