我想创建一个自定义的底部导航栏,类似于下面的屏幕截图所示:
能否请您就如何实现这一目标提供指导?我对自定义应用程序中底部导航栏的外观和功能感兴趣。任何提示、代码片段或推荐的资源都将不胜感激。
提前感谢您的帮助!
编辑:
我用下面的代码得到的结果
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Custom Bottom Navigation Bar'),
),
body: Center(
child: Text('Page ${_currentIndex + 1}'),
),
bottomNavigationBar: Stack(
children: <Widget>[
BottomAppBar(
shape: CircularNotchedRectangle(),
child: Container(
height: 60.0,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
IconButton(
icon: Icon(Icons.home),
onPressed: () {
setState(() {
_currentIndex = 0;
});
},
),
IconButton(
icon: Icon(Icons.search),
onPressed: () {
setState(() {
_currentIndex = 1;
});
},
),
SizedBox(width: 80.0), // Espace réservé pour l'icône SVG
IconButton(
icon: Icon(Icons.notifications),
onPressed: () {
setState(() {
_currentIndex = 2;
});
},
),
IconButton(
icon: Icon(Icons.person),
onPressed: () {
setState(() {
_currentIndex = 3;
});
},
),
],
),
),
),
Positioned(
top: -40.0,
left: MediaQuery.of(context).size.width / 2 - 24.0,
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
SvgPicture.asset(
'assets/rugby.svg', // Remplacez par le chemin de votre fichier SVG
height: 80.0,
width: 80.0,
),
Text('Icône', style: TextStyle(fontSize: 12.0)),
],
),
),
],
),
);
}
2条答案
按热度按时间7d7tgy0s1#
我建议您使用NavigationBar,这是遵循Material 3建议的版本。在这种情况下,您应该修改某些内容以具体实现您可以修改的方面:splashColor、hoverColor和indicatorColor。您可以使用
StatefullWidget
来修改或执行一些动画,无论是调整大小,旋转或任何您需要的内容:要做到这一点,你基本上应该通过setState
更新selectedIndex,并结合一些AnimatedFoo小部件来实现一个很好的效果。如果您的需求非常具体,您可以始终使用简单的Row构建按钮栏,并按照您想要的方式对其进行自定义。
mxg2im7a2#
在Flutter中有很多方法来构建底部导航栏,首先让我列出一些我用于底部导航的Flutter软件包
animated_bottom_navigation_bar: ^1.2.0
(提供了大量的定制; P.S.,I love this one)circular_bottom_navigation: ^2.3.0
bottom_navigation_view: ^0.3.0
curved_navigation_bar: ^1.0.3
(我最近用过这个,我提供了漂亮的曲线动画,已经定制了它的代码来实现阴影和其他东西)在使用任何软件包进行底部导航之前,请同时查看其他软件包。
现在,如果不想使用任何包,下面是在Flutter中构建按钮导航栏的代码片段
在Slraffold有房产名为
buttomNavigationBar
!