flutter - 底部导航栏
问题描述
我有一个问题..我创建了 2 个 dart 文件,一个用于主页,它有材料应用程序和一个带有主体的脚手架..另一个文件在带有主体的脚手架中的底部导航栏。主页在抽屉里有一个开关,我用它在深色和浅色主题之间切换。当我使用开关时,所有小部件的颜色都会发生变化,但底部导航栏会发生变化,并且只有在我单击底部导航栏时才会发生变化。所以我需要知道我做了什么来直接改变栏的颜色..
这是主页文件的代码
class MainPageState extends State<MainPage> {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: theme ? darkTheme : lightTheme,
home: Scaffold(
backgroundColor: theme ? Colors.blueGrey[900] : Colors.white,
appBar: AppBar(
centerTitle: true,
title: Text(
"DSC World",
style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
),
),
body: ListView(
padding: EdgeInsets.fromLTRB(15, 20, 15, 0),
shrinkWrap: true,
physics: ScrollPhysics(),
children: [
GridView.builder(
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
mainAxisSpacing: 25,
crossAxisSpacing: 25,
crossAxisCount: 2,
),
itemBuilder: (context, index) => myCard(
context,
photo1[index]["photo"],
names[index]["name"],
func[index]["func"]),
itemCount: photo1.length,
),
SizedBox(
height: 25,
),
Container(
margin: EdgeInsets.fromLTRB(85, 0, 85, 0),
height: 275,
child: GridView.builder(
physics: NeverScrollableScrollPhysics(),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 1,
),
itemBuilder: (context, index) =>
myCard(context, 'images/anc_g2.png', "Antarctica", Antr()),
itemCount: 1,
),
),
],
),
drawer: Drawer(
child: ListView(
children: [
Card(
color: theme ? Colors.white30 : Colors.blueGrey,
child: DrawerHeader(
child: Column(
children: [
Expanded(child: Image.asset('images/logo1.png')),
Text(
"The Earth",
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 16),
)
],
),
),
),
Column(
children: [
SizedBox(
height: 50,
),
Card(
elevation: 5,
color: theme ? Colors.white30 : Colors.blueGrey,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
" Dark Theme",
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
),
),
Switch(
value: theme,
onChanged: (x) {
setState(() {
theme = x;
});
},
),
],
),
),
],
),
],
),
),
),
);
}
}
//and this is the code of the bottom navigation bar file
class BottomNavBar extends StatefulWidget {
@override
_BottomNavBarState createState() => _BottomNavBarState();
}
List pages = [MainPage(), FavoritePage()];
class _BottomNavBarState extends State<BottomNavBar> {
int currentIndex = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
body: pages[currentIndex],
bottomNavigationBar: BottomNavyBar(
mainAxisAlignment: MainAxisAlignment.spaceAround,
backgroundColor: theme ? Colors.blueGrey[800] : Color(0xff5B7BA6),
onItemSelected: (index) {
setState(() {
currentIndex = index;
});
},
selectedIndex: currentIndex,
items: [
BottomNavyBarItem(
activeColor: Colors.white,
inactiveColor: Colors.black54,
textAlign: TextAlign.center,
title: Text("Home"),
icon: Icon(
Icons.home,
),
),
BottomNavyBarItem(
activeColor: Colors.white,
inactiveColor: Colors.black54,
textAlign: TextAlign.center,
title: Text("Favorite"),
icon: Icon(
Icons.star,
),
),
],
),
);
}
}
解决方案
推荐阅读
- swift - 使用 CompositionalLayout 时如何将 UICollectionView 部分固定到导航栏(最好通过代码,但其他选项也不错)
- google-cloud-platform - GCP K8s 无扩展事件基于日志的指标
- c++ - 在嵌入式系统中使用 noexcept 说明符的优点/缺点是什么?
- python - 如果参数不为空,则向方法调用添加参数
- nginx - 使用 Nginx 的 Docker 映像并在 docker compose 和 Jenkins Pipeline 中运行
- r - 如何裁剪栅格并更改其像元大小和范围以匹配模板栅格?
- python - 超过 4sum 时间限制(leetcode)
- javascript - 用JS更改选择的第一个选项文本
- python - 在 Django 中的另一个模型中使用一个模型
- html - 直接子级(子级组合器)选择器不限于子级