Flutter带未读消息的底部导航

参考:https://github.com/LiuC520/flutter_bottom_tab_bar

基本使用:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
class HomeState extends State<Home> with SingleTickerProviderStateMixin {
TabController _tabController;
int _selectedIndex = 1;
String badgeNo1;
var titles = ['home', 'video', 'find', 'smallvideo', 'my'];
var icons = [
Icons.home,
Icons.play_arrow,
Icons.child_friendly,
Icons.fiber_new,
Icons.mic_none
];

@override
void initState() {
super.initState();
_tabController = new TabController(vsync: this, initialIndex: 1, length: titles.length);
badgeNo1 = '12';
}

void _onItemSelected(int index) {
setState(() {
_selectedIndex = index;
badgeNo1 = '';
});
}

final _widgetOptions = [
Text('Index 0: Home'),
Text('Index 1: Video'),
Text('Index 2: Find'),
Text('Index 3: Small Video'),
Text('Index 4: My'),
];

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Bottom Tab Bar'),
actions: <Widget>[new Icon(Icons.photo_camera)],
),
bottomNavigationBar: BottomTabBar(
items: <BottomTabBarItem>[
BottomTabBarItem(icon: Icon(icons[0]), title: Text(titles[0]), badgeNo: badgeNo1),
BottomTabBarItem(icon: Icon(icons[1]), title: Text(titles[1])),
BottomTabBarItem(icon: Icon(icons[2]), title: Text(titles[2])),
BottomTabBarItem(icon: Icon(icons[3]), title: Text(titles[3]), activeIcon: Icon(icons[3]),),
BottomTabBarItem(icon: Icon(icons[4]), title: Text(titles[4])),
],
fixedColor: Colors.blue,
currentIndex: _selectedIndex,
onTap: _onItemSelected,
type: BottomTabBarType.fixed,
isAnimation: false,
isInkResponse: false,
badgeColor: Colors.green,
),
body: Center(
child: _widgetOptions.elementAt(_selectedIndex),
),
);
}
}

Powered by AppBlog.CN     浙ICP备14037229号

Copyright © 2012 - 2020 APP开发技术博客 All Rights Reserved.

访客数 : | 访问量 :