為什么我的底部導航欄在顫動中不起作用？

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 中運行。 您可以在那里復制、粘貼和運行代碼。

評論會告訴你陷阱。

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");
            });

        },
      ),
    );
  }
}