我有一个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
**的类。但底部导航栏不可见,无法正常工作。我如何修复它。
3条答案
按热度按时间olhwl3o21#
下面是工作代码。尝试在https://dartpad.dev/中运行它
字符串
polkgigr2#
image here正在工作!提供的代码成功执行。请查看您的日志。
35g0bw713#
@SalmanAhmed是对的。导航栏处于无限循环中。
您正在从MachineStatusPage调用Nav,而Nav正在再次调用MachineStatusPage,此循环将继续。
我想你可能想使用MachinePage而不是MachineStatusPage。你只是把它输错了吗?
尝试从列表中删除MachineStatusPage或将其重命名为MachinePage()。像这样:
字符串
而不是:
型