提问人:Roddy Andrade 提问时间:11/14/2023 更新时间:11/14/2023 访问量:43
Flutter 3.10: 推送到子屏幕时保留 BottomNavigationBar
Flutter 3.10: Keep BottomNavigationBar when push to child screen
问:
我的问题既简单又复杂,我有 4 个屏幕,A、B、C 和 D,在屏幕 A 中我有一个将我重定向到 Screen2 的 TextButton,情况是不再显示 BottomNavigationBar,在这种情况下是一个示例,但万一除了屏幕 A 之外,其他人也有类似的情况......最好的方法是什么,如果问题可以在本地正式解决,我不想安装软件包。我在下面附上我的代码:
class HomeScreen extends StatefulWidget {
const HomeScreen({super.key});
@override
State<HomeScreen> createState() => _HomeScreen();
}
class _HomeScreen extends State<HomeScreen> {
int _currentIndex = 0;
final List<Widget> _screens = [
HomePage(),
Text('2'),
Text('3'),
Text('4'),
];
@override
Widget build(BuildContext context) {
return Scaffold(
bottomNavigationBar: BottomNavigationBarHomePage(callback: _onTabTapped),
appBar: AppBar(
elevation: 0,
title: const Text('Player', style: TextStyle(color: Colors.black)),
backgroundColor: Colors.white,
actions: const [
SizedBox(
width: 20,
),
Padding(
padding: EdgeInsets.only(right: 10),
child: Icon(
Icons.notifications,
color: Colors.black,
),
)
],
),
body: _screens[_currentIndex],
floatingActionButton: FloatingActionButton(
onPressed: () {},
backgroundColor: Colors.black,
child: const Icon(Icons.add),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
);
}
void _onTabTapped(int index) {
setState(() {
_currentIndex = index;
});
}
}
class BottomNavigationBarHomePage extends StatefulWidget {
final Function(int) callback;
const BottomNavigationBarHomePage({
super.key,
required this.callback,
});
@override
State<BottomNavigationBarHomePage> createState() =>
_BottomNavigationBarHomePageState();
}
class _BottomNavigationBarHomePageState
extends State<BottomNavigationBarHomePage> {
@override
Widget build(BuildContext context) {
return BottomAppBar(
height: 50,
elevation: 10,
shape: const CircularNotchedRectangle(),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
IconButton(
icon: const Icon(Icons.home),
onPressed: () {
widget.callback(0);
},
),
IconButton(
icon: const Icon(Icons.search),
onPressed: () {
widget.callback(1);
},
),
IconButton(
icon: const Icon(Icons.video_camera_front),
onPressed: () {
widget.callback(2);
},
),
IconButton(
icon: const Icon(Icons.person),
onPressed: () {
widget.callback(3);
},
),
],
),
);
}
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
color: Colors.lightBlueAccent,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Container(
margin: const EdgeInsets.all(16),
child: const Center(
child: Text(
'Screen 1',
style: TextStyle(color: Colors.white, fontSize: 20),
),
),
),
TextButton(
onPressed: () {
Navigator.push(
context, MaterialPageRoute(builder: (context) => Screen2()));
},
child: const Text('Go to next screen'),
),
],
),
);
}
}
class Screen2 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
color: Colors.lightBlueAccent,
alignment: Alignment.center,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
margin: const EdgeInsets.all(16),
child: const Text(
'Screen 2',
style: TextStyle(color: Colors.white, fontSize: 20),
),
),
TextButton(
onPressed: () {
Navigator.pop(context);
},
child: const Text('Go back'),
),
],
),
),
);
}
}
切换屏幕时 BottomNavigationBar 重叠
答: 暂无答案
评论