我是Flutter新手,已经创建了一个很好的带有停靠FAB的BottomAppBar,但我也想将其用于页面导航。 我尝试使用BottomNavigationBar,但那样我就失去了停靠的浮动操作按钮。如何将导航实现到底部应用栏中?
floatingActionButton: Container(
height: 65.0,
width: 65.0,
child: FittedBox(
child: FloatingActionButton(
onPressed: (){},
child: Icon(Icons.add, color: Colors.white,),
// elevation: 5.0,
),
),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
bottomNavigationBar: BottomAppBar(
// elevation: 20.0,
shape: CircularNotchedRectangle(),
child: Container(
height: 75,
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
IconButton(
iconSize: 30.0,
padding: EdgeInsets.only(left: 28.0),
icon: Icon(Icons.home),
onPressed: () {
setState(() {
currentIndex = 0;
});
},
),
IconButton(
iconSize: 30.0,
padding: EdgeInsets.only(right: 28.0),
icon: Icon(Icons.search),
onPressed: () {
setState(() {
currentIndex = 1;
print("${currentIndex}");
});
},
),
IconButton(
iconSize: 30.0,
padding: EdgeInsets.only(left: 28.0),
icon: Icon(Icons.notifications),
onPressed: () {
setState(() {
currentIndex = 2;
print("${currentIndex}");
});
},
),
IconButton(
iconSize: 30.0,
padding: EdgeInsets.only(right: 28.0),
icon: Icon(Icons.list),
onPressed: () {
setState(() {
currentIndex = 3;
print("${currentIndex}");
});
},
)
],
),
)
)
BottomNavigationBar
放置在BottomAppBar
的child
属性中即可。 - Daksh Gargas