flutter底部导航栏添加角标
import 'package:flutter/material.dart';class TabsComponent extends StatefulWidget {@overrideState<StatefulWidget> createState() => new TabsComponentState();}class TabsComponentSta...
·
import 'package:flutter/material.dart';
class TabsComponent extends StatefulWidget {
@override
State<StatefulWidget> createState() => new TabsComponentState();
}
class TabsComponentState extends State<TabsComponent> {
int _selectedIndex = 0;
final List<Widget> _children = [
new PlaceholderWidget('Home'),
new PlaceholderWidget('Love'),
new PlaceholderWidget('Cart'),
new PlaceholderWidget('Order'),
new PlaceholderWidget('My'),
];
@override
Widget build(BuildContext context) {
return new Scaffold(
body: _children[_selectedIndex],
bottomNavigationBar: BottomAppBar(
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
returnBottomItem(_selectedIndex, 0, Icons.home, "首页", 0),
returnBottomItem(_selectedIndex, 1, Icons.favorite_border, "收藏", 0),
returnBottomItem(
_selectedIndex, 2, Icons.local_grocery_store, "购物车", 1),
returnBottomItem(_selectedIndex, 3, Icons.library_books, "订单", 0),
returnBottomItem(_selectedIndex, 4, Icons.person, "我的", 0),
],
),
),
);
}
returnBottomItem(
int selectIndex, int index, IconData iconData, String title, int badge) {
//未选中状态的样式
TextStyle textStyle = TextStyle(fontSize: 12.0, color: Colors.grey);
MaterialColor iconColor = Colors.grey;
double iconSize = 20;
EdgeInsetsGeometry padding = EdgeInsets.only(top: 8.0);
if (selectIndex == index) {
//选中状态的文字样式
textStyle =
TextStyle(fontSize: 12.0, color: Theme.of(context).primaryColor);
//选中状态的按钮样式
iconColor = Theme.of(context).primaryColor;
}
Widget padItem = SizedBox();
if (iconData != null) {
padItem = Padding(
padding: padding,
child: Stack(
children: <Widget>[
Container(
color: Colors.white,
child: Center(
child: Column(
children: <Widget>[
Icon(
iconData,
color: iconColor,
size: iconSize,
),
Text(
title,
style: textStyle,
)
],
),
),
),
Positioned(
child: badge > 0
? Container(
width: 12,
height: 12,
child: Center(
child: Text(badge.toString(),
style: TextStyle(
fontSize: 8.0, color: Colors.white)),
),
decoration: BoxDecoration(
color: Colors.red,
borderRadius: new BorderRadius.all(
const Radius.circular(16.0),
),
),
)
: Text(""),
right: 22.0,
top: 0.0,
),
],
));
}
Widget item = Expanded(
flex: 1,
child: new GestureDetector(
onTap: () {
if (index != _selectedIndex) {
setState(() {
_selectedIndex = index;
});
}
},
child: SizedBox(
height: 52,
child: padItem,
),
),
);
return item;
}
}
class PlaceholderWidget extends StatelessWidget {
final String text;
PlaceholderWidget(this.text);
@override
Widget build(BuildContext context) {
return new Center(
child: new Text(text),
);
}
}
更多推荐
已为社区贡献1条内容
所有评论(0)