质感设计之底部导航栏几乎是所有app的主流结构,那么今天我们就来学习如何实现。网上资料也比较老, 有的还是自己写的,使用不是很方便。
import 'package:flutter/material.dart';
void main() {
runApp(
new MaterialApp(
title: 'flutter 示例',
home: new NavigationBarWidget(),
),
);
}
class NavigationBarWidget extends StatefulWidget {
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return new NavigationBarState();
}
}
class NavigationBarState extends State<NavigationBarWidget> {
String menuStr = 'menu';
var _currentIndex = 0;
@override
Widget build(BuildContext context) {
// TODO: implement build
return new Scaffold(
appBar: new AppBar(
title: new Text('navigationBar 示例'),
centerTitle: true,
),
body: new Center(
child: new Text(menuStr),//body内容
),
bottomNavigationBar: new BottomNavigationBar(
items: <BottomNavigationBarItem>[
new BottomNavigationBarItem(
icon: new Icon(Icons.settings), title: new Text('tools')),
new BottomNavigationBarItem(
icon: new Icon(
Icons.games,//此处图片可以自定义
),
title: new Text('games')),
new BottomNavigationBarItem(
icon: new Icon(
Icons.person,
),
title: new Text('me'))
],
selectedItemColor: Colors.blue,//选中后标签颜色
unselectedItemColor: Colors.black26,//未选中标签颜色
currentIndex: _currentIndex,//选中项的下标
onTap: (int index) {//事件
setState(() {
_currentIndex = index;
menuStr = "menu index is $index";
});
},
),
);
}
}