前言
自從flutter1.0版本發(fā)布之后, 一直想繼續(xù)對其進行研究, 至于與react-native區(qū)別還有flutter初體驗,早在1.0版本沒發(fā)布之前就已經試過了, 本文不在繼續(xù)說這些. 直接上手實戰(zhàn),實踐中遇到問題解決問題,貌似成就感會爆棚.上github上搜索了一下開源的flutter項目, 發(fā)現了一個對于學習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 = ['動態(tài)', '組件', '收藏', '手冊']; // tabbar顯示的文字
// 包含的4個子頁面其中PlaceholderWidget為頁面名稱
final List<Widget> _children = [
new PlaceholderWidget('動態(tài)'),
new PlaceholderWidget('組件'),
new PlaceholderWidget('組件'),
new PlaceholderWidget('手冊'),
];
...............
}
接下來是核心代碼部分, 指的說的地方有一下幾點
-
1,獲取圖片資源需要在pubspec.yaml文件中, 允許讀取其中該文件如圖:
2.png - 2, BottomNavigationBar的type屬性在tabbar大于3個的時候應設置為fixed狀態(tài)
- 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上的每個子元素的建設,, 本文中只是先創(chuàng)建一下, 為了看效果, 之后的更文中,會改變這段代碼. 一共4個一個一個來.
class PlaceholderWidget extends StatelessWidget {
final String text;
PlaceholderWidget(this.text);
@override
Widget build(BuildContext context) {
return new Center(
child: new Text(text),
);
}
}
總結
首先就是不要小看這一小段代碼,其中包含很多的知識點, 總結一下
- 1, 里面有更新狀態(tài)代碼
- 2, 頁面初始化傳值
- 3, 圖片資源引入
- 4, 組件與屬性的簡單用法, 以及運行機制的了解
結束語
下篇更新內容包括: 搜索框, 輪播圖, 列表的應用. 如果時間充裕加上跳轉傳值與回調吧.
