MaterialApp和Scaffold是Flutter提供的两个Widget,其中:
- MaterialApp是一个方便的Widget,它封装了应用程序实现Material Design所需要的一些Widget。(参考)
- Scaffold组件是Material Design布局结构的基本实现。此类提供了用于显示drawer、snackbar和底部sheet的API。(参考)
代码:
@override
Widget build(BuildContext context) {
initData();
return new MaterialApp(
theme: new ThemeData(
// 设置主题颜色
primaryColor: const Color(0xFF63CA6C)
),
home: new Scaffold(
// 设置App顶部的AppBar
appBar: new AppBar(
// AppBar的标题
title: new Text(appBarTitles[_tabIndex],
// 标题文本的颜色
style: new TextStyle(color: Colors.white)),
// AppBar上的图标的颜色
iconTheme: new IconThemeData(color: Colors.white)
),
body: _body,
// 页面底部的导航栏
bottomNavigationBar: new CupertinoTabBar(
items: <BottomNavigationBarItem>[
new BottomNavigationBarItem(
icon: getTabIcon(0),
title: getTabTitle(0)),
new BottomNavigationBarItem(
icon: getTabIcon(1),
title: getTabTitle(1)),
new BottomNavigationBarItem(
icon: getTabIcon(2),
title: getTabTitle(2)),
new BottomNavigationBarItem(
icon: getTabIcon(3),
title: getTabTitle(3)),
],
currentIndex: _tabIndex,
// 底部Tab的点击事件处理
onTap: (index) {
setState((){
_tabIndex = index;
});
},
),
// 侧滑菜单,这里的MyDrawer是自定义的Widget
drawer: new MyDrawer(),
),
);
}
网友评论