Flutter自定义BottomNavigationBar实现图
2020-02-05 本文已影响0人
Eason_0cce
直接看代码：
BottomNavigationBar(
selectedFontSize: 12,
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('首页'),
),
new BottomNavigationBarItem(
title: new Text('购物车'),
icon: new Stack(
overflow: Overflow.visible,
children: <Widget>[
Icon(Icons.shopping_cart),
Positioned( // draw a red marble
top: -6.0,
right: -10.0,
child: Container(
padding: EdgeInsets.all(1),
decoration: new BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(6),
),
constraints: BoxConstraints(
minWidth: 12,
minHeight: 12,
),
child: new Text(
'101',
style: new TextStyle(
color: Colors.white,
fontSize: 8,
),
textAlign: TextAlign.center,
),
),
),
]
),
activeIcon:new Stack(
overflow: Overflow.visible,
children: <Widget>[
Icon(Icons.shopping_cart),
Positioned( // draw a red marble
top: -6.0,
right: -10.0,
child: Container(
padding: EdgeInsets.all(1),
decoration: new BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(6),
),
constraints: BoxConstraints(
minWidth: 12,
minHeight: 12,
),
child: new Text(
'101',
style: new TextStyle(
color: Colors.white,
fontSize: 8,
),
textAlign: TextAlign.center,
),
),
),
]
)
),
BottomNavigationBarItem(
icon:Icon(Icons.person),
title: Text('个人中心'),
),
],
currentIndex: 0,
type:BottomNavigationBarType.fixed,
selectedItemColor: Color(0xFF1972FF),
onTap: (index){
},
)
运行结果：
image.png
图片取代Icon写法：
icon: Image(
width:20,
height:20,
image: AssetImage("images/bottom/person.png"),
),
