dart 底部导航栏在Flutter中不工作

disho6za  于 2024-01-03  发布在  Flutter
关注(0)|答案(3)|浏览(175)

我有一个Flutter的应用程序,我使用底部导航栏在这个应用程序.我写的底部导航栏的代码,在单独的 dart 页面比导入这些页面,在那里我想显示底部导航栏.没有错误.但我的问题是出现我的底部导航栏不显示在任何页面和不正常工作.底部导航栏代码是:

bottom_navigation_bar.dart

import 'package:flutter/material.dart';
import 'package:my_app/DewPoint.dart';
import 'package:my_app/MachineInfo.dart';
import 'package:my_app/MachinePage.dart';
import 'package:my_app/waterPage.dart';

class Nav extends StatefulWidget {
  @override
  State<Nav> createState() {
    return _NavState();
  }
}

class _NavState extends State<Nav> { 
  int myCurrentIndex = 0;
  // List Pages = const[
  //   MachineStatus(),
  //   WaterGenerate(),
  //   // DewPoint(),
  //   // MachineInfo(),
  // ];
  List pages = const [
    MachineStatusPage(),
    waterPage(),
    DewPoint(),
    MachineInfo(),
    // MachinePage(),
    // WaterPage(),
    // DewPoint(),
    // MachineInfo(),
  ];
  // void onClicked(int index) {
  //   setState(() {
  //     myCurrentIndex = index;
  //   });
  // }

  @override
  Widget build(BuildContext context) {
    // Widget activePage = const MachineStatusPage();
    // if (_selectedPageIndex == 1){
    //   activePage = WaterGenaratePage();
    // }
    return Scaffold(
      bottomNavigationBar:
      Container(
        margin: EdgeInsets.symmetric(horizontal: 20, vertical: 40,),
        decoration: BoxDecoration(
          boxShadow: [
            BoxShadow(
              color: Colors.black,
              blurRadius: 25,
            ),
          ]
        ),
        child: BottomNavigationBar(
          backgroundColor: Colors.white,
          selectedItemColor: Colors.amber,
          unselectedItemColor: Colors.black,
          currentIndex: myCurrentIndex,
          onTap: (index) {
            setState(() {
              myCurrentIndex = index;
            });
          },
          items: const <BottomNavigationBarItem> [
          BottomNavigationBarItem(
            icon: Icon(Icons.power),
            label: 'Status',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.water),
            label: 'Water',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.dew_point),
            label: 'Dew Point',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.info),
            label: 'Chassis Info',
          ),
        ],),
      ),
      body: pages[myCurrentIndex],
      // activePage,
    );
  }
}

字符串
然后我导入这些页面:MachinePage,WaterPage,MachineInfo,DewPoint。这里我给予MachinePage的代码作为例子。MachinePage的代码是:

MachinePage.dart

import 'package:firebase_database/firebase_database.dart';
import 'package:firebase_database/ui/firebase_animated_list.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:my_app/bottom_navigation_bar.dart';
import 'package:my_app/waterPage.dart';
import 'CompPage.dart';
import 'DewPoint.dart';
import 'MachineInfo.dart';
import 'main.dart';

class MachineStatusPage extends StatelessWidget {
  const MachineStatusPage({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Nav(),
     
    );
  }
}
class MachinePage extends StatefulWidget {
  // const MachinePage({super.key});
  var machine;
  var nickname;
  MachinePage({Key? mykey, this.machine, this.nickname}) : super(key: mykey);
  @override
  State<MachinePage> createState() {
    return _MachinePageState();
  }

}
class _MachinePageState extends State<MachinePage> {

  var Version;
  var Comp;
  var Comp_Status;
  var arh;
  var adp;
  var temp;
  var status;

  var machine_id;
  bool loading = false;
   @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color.fromARGB(220, 50, 99, 125),
      appBar: AppBar(
          backgroundColor: Theme.of(context).colorScheme.inversePrimary,
          title: Text('Machine Status'),
          actions: <Widget>[
            IconButton(
              icon: Icon(
                Icons.logout,
                color: Colors.white,
              ),
              onPressed: () {
                Navigator.pushReplacement(
                    context,
                    MaterialPageRoute(
                        builder: (context) => MyHomePage(title: 'Flutter Demo Home Page',))
                );
              },
            )
          ]
      ),
      // bottomNavigationBar: Nav(),
      body: Column(
        children: [
          Container(
              child: Center(
                child: Column(
                  children: [
                    SizedBox(height: 40,),
                    Text("Machine Id :  ${widget.machine}", style: TextStyle(fontSize: 20, fontWeight: FontWeight.w700,color: Colors.white, )),
                    SizedBox(height: 10,),
                    Text("Nick Name : ${widget.nickname}", style: TextStyle(fontSize: 20, fontWeight: FontWeight.w700,color: Colors.white,)),
                    // Image(image:  new AssetImage("assets/images/mstatus.png")),
                    SizedBox(height: 80,),
                    ElevatedButton(
                      onPressed: () {},
                      child: Text('ON', style: TextStyle(color: Colors.white, fontSize: 20,)),
                      style: ElevatedButton.styleFrom(
                        shape: CircleBorder(),
                        padding: EdgeInsets.all(80),
                        backgroundColor: Colors.blue, // <-- Button color
                        foregroundColor: Colors.red, // <-- Splash color
                      ),
                    ),

                  ],
                  // ),
                ),
              ),
            ),
          // Nav(),
        ],
      ),
      // bottomNavigationBar: Nav(),
      //   ),
      // ),
    );
  }

}


在**MachinePage.dart中,我声明了bottom_nav_bar.dart**的类。但底部导航栏不可见,无法正常工作。我如何修复它。

olhwl3o2

olhwl3o21#

下面是工作代码。尝试在https://dartpad.dev/中运行它

import 'package:flutter/material.dart';

  void main() => runApp(MyApp());

  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'Flutter Demo',
        debugShowCheckedModeBanner: false,
        theme: ThemeData(
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
          useMaterial3: true,
        ),
        home: Nav(),
      );
    }
  }

  class Nav extends StatefulWidget {
    @override
    State<Nav> createState() {
      return _NavState();
    }
  }

  class _NavState extends State<Nav> { 
    int myCurrentIndex = 0;
    // List Pages = const[
    //   MachineStatus(),
    //   WaterGenerate(),
    //   // DewPoint(),
    //   // MachineInfo(),
    // ];
    List pages = const [
      MachineStatusPage(),
      MachineStatusPage(),
      MachineStatusPage(),
      MachineStatusPage(),
      // MachinePage(),
      // WaterPage(),
      // DewPoint(),
      // MachineInfo(),
    ];
    // void onClicked(int index) {
    //   setState(() {
    //     myCurrentIndex = index;
    //   });
    // }

    @override
    Widget build(BuildContext context) {
      // Widget activePage = const MachineStatusPage();
      // if (_selectedPageIndex == 1){
      //   activePage = WaterGenaratePage();
      // }
      return Scaffold(
        bottomNavigationBar:
        Container(
          margin: EdgeInsets.symmetric(horizontal: 20, vertical: 40,),
          decoration: BoxDecoration(
            boxShadow: [
              BoxShadow(
                color: Colors.black,
                blurRadius: 25,
              ),
            ]
          ),
          child: BottomNavigationBar(
            backgroundColor: Colors.white,
            selectedItemColor: Colors.amber,
            unselectedItemColor: Colors.black,
            currentIndex: myCurrentIndex,
            onTap: (index) {
              setState(() {
                myCurrentIndex = index;
              });
            },
            items: const <BottomNavigationBarItem> [
            BottomNavigationBarItem(
              icon: Icon(Icons.power),
              label: 'Status',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.water),
              label: 'Water',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.dew_point),
              label: 'Dew Point',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.info),
              label: 'Chassis Info',
            ),
          ],),
        ),
        body: pages[myCurrentIndex],
        // activePage,
      );
    }
  }

  class MachineStatusPage extends StatelessWidget {
    const MachineStatusPage({super.key});

    // This widget is the root of your application.
    @override
    Widget build(BuildContext context) {
      return MachinePage(machine: 0011, nickname: "Home");
    }
  }
  class MachinePage extends StatefulWidget {
    // const MachinePage({super.key});
    var machine;
    var nickname;
    MachinePage({Key? mykey, this.machine, this.nickname}) : super(key: mykey);
    @override
    State<MachinePage> createState() {
      return _MachinePageState();
    }

  }
  class _MachinePageState extends State<MachinePage> {

    var Version;
    var Comp;
    var Comp_Status;
    var arh;
    var adp;
    var temp;
    var status;

    var machine_id;
    bool loading = false;
     @override
    Widget build(BuildContext context) {
      return Scaffold(
        backgroundColor: Color.fromARGB(220, 50, 99, 125),
        appBar: AppBar(
            backgroundColor: Theme.of(context).colorScheme.inversePrimary,
            title: Text('Machine Status'),
            actions: <Widget>[
              IconButton(
                icon: Icon(
                  Icons.logout,
                  color: Colors.white,
                ),
                onPressed: () {
  //                 Navigator.pushReplacement(
  //                     context,
  //                     MaterialPageRoute(
  //                         builder: (context) => MyHomePage(title: 'Flutter Demo Home Page',))
  //                 );
                },
              )
            ]
        ),
        // bottomNavigationBar: Nav(),
        body: Column(
          children: [
            Container(
                child: Center(
                  child: Column(
                    children: [
                      SizedBox(height: 40,),
                      Text("Machine Id :  ${widget.machine}", style: TextStyle(fontSize: 20, fontWeight: FontWeight.w700,color: Colors.white, )),
                      SizedBox(height: 10,),
                      Text("Nick Name : ${widget.nickname}", style: TextStyle(fontSize: 20, fontWeight: FontWeight.w700,color: Colors.white,)),
                      // Image(image:  new AssetImage("assets/images/mstatus.png")),
                      SizedBox(height: 80,),
                      ElevatedButton(
                        onPressed: () {},
                        child: Text('ON', style: TextStyle(color: Colors.white, fontSize: 20,)),
                        style: ElevatedButton.styleFrom(
                          shape: CircleBorder(),
                          padding: EdgeInsets.all(80),
                          backgroundColor: Colors.blue, // <-- Button color
                          foregroundColor: Colors.red, // <-- Splash color
                        ),
                      ),

                    ],
                    // ),
                  ),
                ),
              ),
            // Nav(),
          ],
        ),
        // bottomNavigationBar: Nav(),
        //   ),
        // ),
      );
    }
  }

字符串

polkgigr

polkgigr2#

image here正在工作!提供的代码成功执行。请查看您的日志。

35g0bw71

35g0bw713#

@SalmanAhmed是对的。导航栏处于无限循环中。
您正在从MachineStatusPage调用Nav,而Nav正在再次调用MachineStatusPage,此循环将继续。
我想你可能想使用MachinePage而不是MachineStatusPage。你只是把它输错了吗?
尝试从列表中删除MachineStatusPage或将其重命名为MachinePage()。像这样:

List pages = const [
    MachinePage(),
    waterPage(),
    DewPoint(),
    MachineInfo(),
    // MachinePage(),
    // WaterPage(),
    // Dew Point(),
    // MachineInfo(),
  ];

字符串
而不是:

List pages = const [
    MachineStatusPage(),
    waterPage(),
    DewPoint(),
    MachineInfo(),
    // MachinePage(),
    // WaterPage(),
    // DewPoint(),
    // MachineInfo(),
  ];

相关问题