Flutter 搭建一個學習flutter的app(一)

摘要： 前言 自從flutter1.0版本釋出之後, 一直想繼續對其進行研究, 至於與react-native區別還有flutter初體驗,早在1.0版本沒釋出之前就已經試過了, 本文不在繼續說這些. 直接上手實戰,實踐中遇到問題解決問題,貌似成就感會爆棚.上github上搜索了一下開源的flut...

前言

自從flutter1.0版本釋出之後, 一直想繼續對其進行研究, 至於與react-native區別還有flutter初體驗,早在1.0版本沒釋出之前就已經試過了, 本文不在繼續說這些. 直接上手實戰,實踐中遇到問題解決問題,貌似成就感會爆棚.上github上搜索了一下開源的flutter專案, 發現了一個對於學習flutter專案幫助學習的叫flutter go的專案比較不錯. 索性站在巨人的肩膀上,既有了UI設計, 內容實際意義也比較不錯. 就照著臨摹一個吧.當然是需要一步一步來的. 今天首先說一下專案框架的搭建問題吧.效果圖如下:

程式碼解析

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, 元件與屬性的簡單用法, 以及執行機制的瞭解

結束語

下篇更新內容包括: 搜尋框, 輪播圖, 列表的應用. 如果時間充裕加上跳轉傳值與回撥吧.