前言
自从flutter1.0版本发布之后, 一直想继续对其进行研究, 至于与react-native区别还有flutter初体验,早在1.0版本没发布之前就已经试过了, 本文不在继续说这些. 直接上手实战,实践中遇到问题解决问题,貌似成就感会爆棚.上github上搜索了一下开源的flutter项目, 发现了一个对于学习flutter项目帮助学习的叫flutter go的项目比较不错. 索性站在巨人的肩膀上,既有了UI设计, 内容实际意义也比较不错. 就照着临摹一个吧.当然是需要一步一步来的. 今天首先说一下项目框架的搭建问题吧.效果图如下:
1.png
代码解析
class Home extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return new _HomeState();
}
}
接下来是_HomeState的类方法以及定义的变量方法
class _HomeState extends State<Home> {
int _currentIndex = 0; // 控制跳转那个底部路由
var appBarTitles = ['动态', '组件', '收藏', '手册']; // tabbar显示的文字
// 包含的4个子页面其中PlaceholderWidget为页面名称
final List<Widget> _children = [
new PlaceholderWidget('动态'),
new PlaceholderWidget('组件'),
new PlaceholderWidget('组件'),
new PlaceholderWidget('手册'),
];
...............
}
接下来是核心代码部分, 指的说的地方有一下几点
-
1,获取图片资源需要在pubspec.yaml文件中, 允许读取其中该文件如图:
2.png - 2, BottomNavigationBar的type属性在tabbar大于3个的时候应设置为fixed状态
- 3, BottomNavigationBar作为MaterialApp架构下的封装的组件,具有Material Design的设计风格,如果这种分割不被您的设计师看好,让你改变, 那就自己写一个BottomNavigationBar吧. 没别的好办法.哈哈哈(如果有告诉我声哈.拜托拜托)
@override
Widget build(BuildContext context) {
return Scaffold(
body: _children[_currentIndex],
bottomNavigationBar: new BottomNavigationBar(
onTap: onTabTapped,
currentIndex: _currentIndex,
type: BottomNavigationBarType.fixed,
items: [
new BottomNavigationBarItem(
activeIcon: getTabImage('assets/images/ic_tab_new_sel.png'),
icon: getTabImage('assets/images/ic_tab_new.png'),
title: getTabTitle(0)),
new BottomNavigationBarItem(
activeIcon: getTabImage('assets/images/ic_tab_component_sel.png'),
icon: getTabImage('assets/images/ic_tab_component.png'),
title: getTabTitle(1)),
new BottomNavigationBarItem(
activeIcon: getTabImage('assets/images/ic_tab_save_sel.png'),
icon: getTabImage('assets/images/ic_tab_save.png'),
title: getTabTitle(2)),
new BottomNavigationBarItem(
activeIcon: getTabImage('assets/images/ic_tab_mine_sel.png'),
icon: getTabImage('assets/images/ic_tab_mine.png'),
title: getTabTitle(3)),
],
iconSize: 24.0,
),
);
}
最后就是3个方法, 在build中使用到, 通俗易懂
void onTabTapped(int index) {
setState(() {
_currentIndex = index;
});
}
Text getTabTitle(int curIndex) {
var color;
if (curIndex == _currentIndex) {
color = Colors.green;
} else {
color = Colors.black;
}
return new Text(appBarTitles[curIndex],
style: new TextStyle(fontSize: 14.0, color: color));
}
Image getTabImage(path) {
return new Image.asset(path,
width: 24.0, height: 24.0, repeat: ImageRepeat.repeat);
}
最后的最后就是tabbar上的每个子元素的建设,, 本文中只是先创建一下, 为了看效果, 之后的更文中,会改变这段代码. 一共4个一个一个来.
class PlaceholderWidget extends StatelessWidget {
final String text;
PlaceholderWidget(this.text);
@override
Widget build(BuildContext context) {
return new Center(
child: new Text(text),
);
}
}
总结
首先就是不要小看这一小段代码,其中包含很多的知识点, 总结一下
- 1, 里面有更新状态代码
- 2, 页面初始化传值
- 3, 图片资源引入
- 4, 组件与属性的简单用法, 以及运行机制的了解
结束语
下篇更新内容包括: 搜索框, 轮播图, 列表的应用. 如果时间充裕加上跳转传值与回调吧.
