BottomNavigationBar 本身是不支持设置圆角的,可以在BottomNavigationBar外面嵌套一层布局,使外面的布局设置为圆角,BottomNavigationBar的背景色设置成透明,这样就可以实现想要的效果
最重要的一点
Scaffold必须要添加extendBody: true,否则会造成圆角处没有透明效果
直接上代码
bottomNavigationBar:Container(
decoration: const BoxDecoration(
color: Color(0xFFbbcdc5),
borderRadius: BorderRadius.only(topRight:Radius.circular(20),topLeft: Radius.circular(20)),
),
child: BottomNavigationBar(
backgroundColor:Colors.transparent,
currentIndex: this._currentIndex,
//tabbar的点击事件
onTap: (int index) {
},
//设置图标尺寸
iconSize: 20,
unselectedItemColor: Colors.white,
selectedItemColor: Colors.blue,
type:BottomNavigationBarType.fixed,
//设置item
items: [
BottomNavigationBarItem(icon: Icon(Icons.home), label: "工具"),
BottomNavigationBarItem(icon: Icon(Icons.category), label: "备用"),
BottomNavigationBarItem(icon: Icon(Icons.settings), label: "备用"),
BottomNavigationBarItem(icon: Icon(Icons.web), label: "备用"),
],
),
),