BottomNavigationBar 本身是不支持設(shè)置圓角的,可以在BottomNavigationBar外面嵌套一層布局渤昌,使外面的布局設(shè)置為圓角,BottomNavigationBar的背景色設(shè)置成透明葵萎,這樣就可以實(shí)現(xiàn)想要的效果
最重要的一點(diǎn)
Scaffold必須要添加extendBody: true,否則會(huì)造成圓角處沒(méi)有透明效果
直接上代碼
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的點(diǎn)擊事件
onTap: (int index) {
},
//設(shè)置圖標(biāo)尺寸
iconSize: 20,
unselectedItemColor: Colors.white,
selectedItemColor: Colors.blue,
type:BottomNavigationBarType.fixed,
//設(shè)置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: "備用"),
],
),
),