Flutter实现底部导航栏效果实现底部导航栏效果
大家最近都在讨论新鲜技术-flutter，小编也在学习中，遇到大家都遇到的问题，底部导航。下面给大家贴出底部导航的编写，
主要参考了lime这个项目。
上代码
一一.在在main.dart文件中文件中
定义APP的基本信息
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: themeColor(),
),
home: new MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
其中主要代码部分
class _MyHomePageState extends State<MyHomePage> {
PageController pageController;
int page = 0;
@override
Widget build(BuildContext context) {
return new Scaffold(
backgroundColor: Colors.grey,
body: new PageView(
children: [
new Index(),
new Classify(),
new Shopping(),
new Myself()
],
controller: pageController,
onPageChanged: onPageChanged
),
bottomNavigationBar: new BottomNavigationBar(items: [
new BottomNavigationBarItem(
icon: new Icon(Icons.laptop_chromebook),
title: new Text("主页"),
backgroundColor: Colors.grey
),
new BottomNavigationBarItem(
icon: new Icon(Icons.list), title: new Text("分类"),backgroundColor: Colors.grey),
new BottomNavigationBarItem(
icon: new Icon(Icons.local_grocery_store), title: new Text("购物车")),
new BottomNavigationBarItem(icon: new Icon(Icons.person), title: new Text("我的"))
],
onTap: onTap,
currentIndex: page
),
资源评论
