为什么显示的屏幕在更新屏幕索引时没有变化？

Question

我有一个mainPage.dart文件，它有一个底部导航栏，点击按钮会更改一个名为currentIndex的全局变量。mainPage文件的主体被设置为显示currentIndex处屏幕列表中的屏幕。问题是，当底部导航栏更新currentIndex时，屏幕不会改变。如果这不清楚，我很抱歉，但它在代码示例中更有意义：

mainPage.dart

import 'package:flutter/material.dart';
import 'package:taskapp/screens/home/addTask.dart';
import 'package:taskapp/screens/home/home.dart';
import 'package:taskapp/taskGlobals.dart';                         // <= currentIndex is in here
import 'home/widgets/appBars.dart' as buildNavigationBars;
class mainPage extends StatefulWidget {
@override
State<mainPage> createState() => _mainPageState();
}
class _mainPageState extends State<mainPage> {
final screens = [
HomePage(),
addTask(),
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: PreferredSize(
preferredSize: const Size.fromHeight(60),
child: buildNavigationBars.topNavBar()),
body: screens[currentIndex],
bottomNavigationBar: buildNavigationBars.BottomNavBar(),
);
}
}

appBars.dart文件：

import 'package:flutter/material.dart';
import 'package:taskapp/screens/home/addTask.dart';
import 'package:taskapp/screens/home/home.dart';
import 'package:taskapp/taskGlobals.dart';
class BottomNavBar extends StatelessWidget {
@override
Widget build(BuildContext context) {
return _buildBottomNavigationBar();
}
}
class topNavBar extends StatelessWidget {
@override
Widget build(BuildContext context) {
return _buildAppBar();
}
}
Widget _buildBottomNavigationBar(Function(int) onTap) {
return Container(
decoration: BoxDecoration(
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(30),
topRight: Radius.circular(30),
),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.2),
spreadRadius: 5,
blurRadius: 10)
]),
child: ClipRRect(
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(30),
topRight: Radius.circular(30),
),
child: BottomNavigationBar(
currentIndex: GlobalVariable().currentIndex(),
backgroundColor: Colors.white,
showSelectedLabels: false,
showUnselectedLabels: false,
selectedItemColor: Colors.blueAccent,
unselectedItemColor: Colors.grey.withOpacity(0.5),
onTap: onTap,
items: const [
BottomNavigationBarItem(
label: 'Home',
icon: Icon(Icons.home_rounded, size: 30),
),
BottomNavigationBarItem(
label: 'Tasks',
icon: Icon(Icons.add_task_rounded, size: 30),
)
],
),
),
);
}
AppBar _buildAppBar() {
return AppBar(
backgroundColor: Colors.white,
elevation: 0,
title: Row(
children: [
Container(
height: 45,
width: 45,
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Image.asset('assets/images/avatar.jpeg'),
),
),
const SizedBox(width: 10),
const Text(
'Hi Amit',
style: TextStyle(
color: Colors.black, fontSize: 26, fontWeight: FontWeight.bold),
),
],
),
actions: const [
Icon(
Icons.more_vert,
color: Colors.black,
size: 40,
)
],
);
}
}

任务全局：

library myprj.taskGlobals;
import 'package:cloud_firestore/cloud_firestore.dart';
int currentIndex = 0;                                             // currentIndex
DocumentSnapshot snapshot = FirebaseFirestore.instance
.collection('name I would not like to share for privacy')
.doc('another name')
.get() as DocumentSnapshot;

Answer 1

每当更新StatefulWidget内部的变量时，都需要调用setState((){});以使用新值重建Widget。

onTap: (index) => setState(() { currentIndex = index;}),  

Answer 2

首先在此处定义您的currentIndex：

class _mainPageState extends State<mainPage> {
int currentIndex = 0; 
final screens = [
HomePage(),
addTask(),
];
...
}

然后将BottomNavBar类和_buildBottomNavigationBar更改为：

class BottomNavBar extends StatelessWidget {
final Function(int) onTap;
BottomNavBar({@requird this.onTap});

@override
Widget build(BuildContext context) {
return _buildBottomNavigationBar(onTap);
}
}

Widget _buildBottomNavigationBar(Function(int) onTap) {
return Container(
decoration: BoxDecoration(
...
)
);
}

并使用你在_buildBottomNavigationBar内通过的onTap，如下所示：

onTap: onTap,  

然后在你的mainPage课上这样做：

bottomNavigationBar: buildNavigationBars.BottomNavBar(
(index){
setState(() {
currentIndex = index;  
});
}
),