flutter - 颤振底部导航栏在导航上消失
问题描述
我有一个包含 4 个项目的底部导航栏和一个带有 3 个路由器的顶部导航栏,这些路由器重定向到其中没有一个是底部导航栏的一部分的页面,我的底部导航栏工作正常,但是每当我使用顶部导航栏时,我的底部导航栏消失了,基本上我希望底部导航栏上的第一项包含我的顶部导航栏的所有 3 页,每当我使用顶部导航栏导航时,底部导航栏上的第一项保持选中状态。
class _HomePageState extends State<HomePage> {
PageController _pageController = PageController();
List<Widget> _screens = [
ProchaineState(),
MesEncheres(),
MesFavorisOn(
arr: [],
),
Autres(),
];
int _selectedIndex = 0;
void _onPageChanged(int index) {
setState(() {
_selectedIndex = index;
});
}
void _onItemTapped(int selectedIndex) {
_pageController.jumpToPage(selectedIndex);
}
@override
Widget build(BuildContext context) {
return Scaffold(
extendBody: true,
body: PageView(
controller: _pageController,
children: _screens,
onPageChanged: _onPageChanged,
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: Container(
margin: EdgeInsets.only(
top: 70.0,
),
height: 72.0,
width: 72.0,
child: FloatingActionButton(
backgroundColor: Colors.transparent,
elevation: 0.0,
onPressed: () {},
child: Stack(
children: [
Image.asset(
'assets/images/Ellipse 348.png',
),
Container(
margin: EdgeInsets.only(
left: 23.0,
top: 20.0,
),
child: Image.asset(
'assets/images/Icon feather-shopping-cart.png',
),
),
],
),
),
),
bottomNavigationBar: Container(
height: 70.0,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topRight: Radius.circular(30),
topLeft: Radius.circular(30),
),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.8),
spreadRadius: 10,
blurRadius: 5,
offset: Offset(0, 7),
),
],
),
child: ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30.0),
topRight: Radius.circular(30.0),
),
child: BottomNavigationBar(
onTap: _onItemTapped,
selectedFontSize: 0,
backgroundColor: Colors.white,
showSelectedLabels: false,
showUnselectedLabels: false,
type: BottomNavigationBarType.fixed,
items: [
BottomNavigationBarItem(
icon: _selectedIndex == 0
? CircleAvatar(
backgroundImage: NetworkImage(
'https://lh3.googleusercontent.com/zXsTPqAQch7qsQdRqZal7Mm0Wmxev0X5SRedA0B7NVMi7oKcygrWKxLaPiZX7gYCNmcMdA=s42',
),
child: Image.asset(
'assets/images/AccueilSelected.png',
),
)
: Image.asset('assets/images/Accueil.png'),
label: "",
),
BottomNavigationBarItem(
icon: _selectedIndex == 1
? Container(
margin: EdgeInsets.only(
right: 42.0,
),
child: CircleAvatar(
backgroundImage: NetworkImage(
'https://lh3.googleusercontent.com/zXsTPqAQch7qsQdRqZal7Mm0Wmxev0X5SRedA0B7NVMi7oKcygrWKxLaPiZX7gYCNmcMdA=s42',
),
child: Stack(
children: [
Image.asset(
'assets/images/Group 494Selected.png'),
Container(
margin: EdgeInsets.only(
left: 19.0,
// top: 0.8,
),
child: Image.asset(
'assets/images/Ellipse 341.png'),
),
],
),
),
)
: Container(
margin: EdgeInsets.only(
right: 42.0,
),
child: Stack(
children: [
Image.asset('assets/images/Group 494.png'),
Container(
margin: EdgeInsets.only(
left: 19.0,
// top: 0.8,
),
child:
Image.asset('assets/images/Ellipse 341.png'),
),
],
),
),
label: "",
),
BottomNavigationBarItem(
icon: _selectedIndex == 2
? Container(
margin: EdgeInsets.only(
left: 38.0,
),
child: CircleAvatar(
backgroundImage: NetworkImage(
'https://lh3.googleusercontent.com/zXsTPqAQch7qsQdRqZal7Mm0Wmxev0X5SRedA0B7NVMi7oKcygrWKxLaPiZX7gYCNmcMdA=s42',
),
child: Image.asset(
'assets/images/Icon ionic-ios-heart-emptySelected.png',
),
),
)
: Container(
margin: EdgeInsets.only(
left: 38.0,
),
child: Image.asset(
'assets/images/Icon ionic-ios-heart-emptyBlack.png'),
),
label: "",
),
BottomNavigationBarItem(
icon: _selectedIndex == 3
? CircleAvatar(
backgroundImage: NetworkImage(
'https://lh3.googleusercontent.com/zXsTPqAQch7qsQdRqZal7Mm0Wmxev0X5SRedA0B7NVMi7oKcygrWKxLaPiZX7gYCNmcMdA=s42',
),
child: Image.asset(
'assets/images/Icon open-menuSelected.png',
),
)
: Image.asset(
'assets/images/Icon open-menu.png',
width: 24.0,
height: 21.0,
),
label: "",
),
],
),
),
),
);
}
}
解决方案
推荐阅读
- c - 软件渲染器。在这个项目中,为什么 x,y,z 轴是这样的?
- python - Jupyter notebook 很慢/滞后,即使更新了内核并且没有运行输出/单元
- python - 使用 git bash 打开 PyCharm 的路径?
- android - Android Emulator 在 Ubuntu 20.04 上不播放声音
- extent - 范围报告未通过 Maven 构建生成
- ios - 当 MacOS Catalyst 上的屏幕上出现其他具有自定义样式的按钮时,没有样式的 SwiftUI 按钮(以及其他所有内容)变得无响应
- yarnpkg - 如何让 `npx mrm lint-staged` 工作
- java - 如何为将记录保存在数据库中的 void 方法编写 JUnit 5 测试?
- ruby-on-rails - 从 Rails 5.2 迁移到 Rails 6.0 后,ActiveRecord::ConnectionNotEstablished 随机出现在部署实例中
- node.js - 使用 mongodb 获取特定半径内所有用户的最佳方法是经纬度?