【发布时间】:2021-08-25 09:16:29
【问题描述】:
当导航到不属于底部导航栏项目的页面时,有没有办法让底部导航栏可见?
编辑:我使用了来自 pub.dev 的包 persistent_bottom_nav_bar,@Abhijith 为我推荐了它,它工作得非常好,但我想制作一个自定义导航栏,但我在编辑它时遇到了一些麻烦,这就是我的设计想用persistent_bottom_nav_bar来实现
这是使用底部导航栏设计的代码:
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: "",
),
],
),
),
【问题讨论】:
-
你可以看一下this article,它展示了多个导航器的使用,s.t.每个按钮导航项都有自己的状态,切换时保持状态
标签: flutter navigation