1.Widge組件分類
在flutter中入宦，所有UI元素都是widget組件蛙埂，除了我們常見的button帅腌，Image這些可見元素驰弄，布局也是組件，甚至文本格式控制也是組件速客。這里我們先簡單講解一下我們通常概念的上的UI控件戚篙。在flutter中組件有兩種：有狀態(tài)組件和無狀態(tài)組件。
- 無狀態(tài)組件（stateless widget）溺职，無狀態(tài)組件不提供可變狀態(tài)維護岔擂，無狀態(tài)組件僅根據(jù)其屬性來渲染位喂，
- 有狀態(tài)組件（stateful Widget）,組件自己維護狀態(tài)，組件渲染由SetState方法調用乱灵，更具state的變化差異來更新渲染塑崖。所有的stateful widget都是建立在stateless widget上的。
這里我們先講解stateless widget, flutter中的stateless widget主要分為這幾類： - Visual Base Elemet, 可視基礎元素比如：Text痛倚，Image, Icon
- Layout: 布局元素规婆，flutter比較特別一點，它把布局也作為頁面元素蝉稳，這樣做的主要目的是可以簡化布局計算抒蚜。以前UI做Layout通常通過Layout引擎根據(jù)預定的約束來進行計算, 計算過程實際上是做多元方程式求解，元素越多求解計算就越慢耘戚，參考：從 Auto Layout 的布局算法談性能
嗡髓。而flutter將layout也作為頁面元素，使得布局在局部范圍就可以求解毕莱。Layout元素有：Row器贩，Column，Center朋截，Align蛹稍，Padding等 -
Painting and Effect Widgets& Animation and Motion
，繪制和效果組件部服。繪制和效果組件主要是負責可視元素的裝飾效果唆姐，比如實現(xiàn)邊框（DecoratedBox）,實現(xiàn)半透明（Opacity），位移旋轉變換（Transform）廓八，Animation and Motion是比較特殊的效果組件奉芦，用于實現(xiàn)動畫效果 - Container&compound element 大多數(shù)我們常用的各種控件都是由基礎元素和布局組合而成的，比如button由Text剧蹂，Image声功，DecoratedBox等元素組成
- Interaction Model Widgets, 這個是專門處理事件響應的組件，用于響應用戶的操作
2.讓我們來創(chuàng)建Hello World
首先我們先來寫一個最基本的flutter應用吧宠叼。
1.在適當?shù)哪夸泩?zhí)行：
flutter init -o my_hello_world_app
2.替換my_hello_world_app/lib/main.dart文件中的內容：
import 'package:flutter/material.dart';
void main() => runApp(new Center(child: new Text('Hello, world!')));
3.在my_hello_world_app目錄下執(zhí)行：
flutter start
4.你將會在手機上看到：
如果你能一切順利的來到這里先巴，那么恭喜你，你已經(jīng)成功使用flutter開發(fā)了一個android的應用冒冬，雖然這個應用看上去比較單一伸蚯。
main方法是這個應用的入口，要運行一個應用的話需要使用runApp方法简烤，它接收一個Widget控件作為參數(shù)剂邮，并且把這個控件作為控件樹的根節(jié)點。在我們這個例子里横侦，控件樹里有兩個控件挥萌，Center控件和它的子節(jié)點Text绰姻。通常情況下框架會強制將根控件充滿整個屏幕，所以相對的Text控件就以屏幕為中心了瑞眼。
重要概念：
在編寫flutter應用的時候龙宏，通常情況下需要自定義組件棵逊，這些組件繼承自StatelessComponent或StatefulComponent,選擇要繼承哪一個取決于這個組件是否需要管理狀態(tài)和配置伤疙。一個組件的主要工作就是實現(xiàn)build方法，這個方法用來反應該組件在其他組件中的表現(xiàn)形式辆影。最后底層框架會統(tǒng)一從上到下調用build方法直至渲染樹的最底層徒像。
基本控件
flutter提供了一套完備的基本控件，最常用的有如下幾個：
- Text ：Text提供了一個用來顯示文本的一次性控件（即無狀態(tài)）蛙讥。
- Row, Column：這兩個控件用來顯示水平或垂直方向上的多個組件锯蛀，并且是可伸縮的。
- Stack：可以將多個組件以一定的順序排列次慢，可以使用
Positioned控件來指定組件在Stack中的順序旁涤。 - Container: 是一個可視化的矩形控件，它可以使用
BoxDecoration來進行外觀裝飾迫像，裝飾內容可以是背景劈愚，邊框和陰影等。Container也有外邊距闻妓，內邊距等屬性菌羽，也可以約束自身的大小，另外值得一提的是Container還可以利用矩陣在三維控件內做轉換由缆。
下面結合一些基本的控件來自定義我們的組件并構建應用：
修改main.dart代碼如下
import 'package:flutter/material.dart';
class MyToolBar extends StatelessComponent { //（3）
MyToolBar({ this.title });
final Widget title; //（6）
Widget build(BuildContext context) {
return new Container(
height: 56.0,
padding: const EdgeDims.symmetric(horizontal: 8.0),
decoration: new BoxDecoration(
backgroundColor: Colors.blue[500]
),
child: new Row([
new IconButton(icon: 'navigation/menu'),
new Flexible(child: title),
new IconButton(icon: 'action/search'),
])
);
}
}
class MyScaffold extends StatelessComponent { //（4）
Widget build(BuildContext context) {
return new Material(
child: new Column([
new MyToolBar(
title: new Text('Example title', style: Typography.white.title)
),
new Flexible(
child: new Center(
child: new Text('Hello, world!')
)
)
])
);
}
}
void main() {
runApp(new MaterialApp( //(1)
title: 'My app',
routes: <String, RouteBuilder>{ //（2）
'/': (RouteArguments args) => new MyScaffold() //（5）
}
));
}
同時確保flutter.yaml文件內容如下：
name: my_app
material-design-icons:
- name: action/search
- name: navigation/menu
我們先來運行一下這個應用：
恭喜你注祖，順利存活。
代碼解釋如下：
- （1）處的
MaterialApp是整個應用的主題控件均唉，一般我們自定義的組件要寫在它里面才會有Material的主題風格 - （2）處的
routes的作用是頁面導航作用是晨，/表示應用打開的第一個頁面。 - （3）處的
MyToolBar是我們自定義的一個無狀態(tài)組件舔箭，通過build方法罩缴，我們可以看出其最外層是一個Container控件，控件高為56dp,左右內邊距8dp限嫌，它由一個BoxDecoration做修飾靴庆，修飾內容是將背景顏色改為Colors.blue[500]這種顏色。Container的內部是一個Row怒医，Row的兩端分別是一個圖標按鈕炉抒，中間是另一個控件Flexible，它的作用是填充掉Row的剩余部分稚叹。在Flexible中傳入的是title這個內部字段焰薄。 - （4）處的
MyScaffold組件將其子節(jié)點用垂直的方式組織起來拿诸，在Column的第一個位置是我們自定義的MyToolBar，在構造MyToolBar的時候將一個Text控件作為它的命名可選參數(shù)title的值傳遞進去塞茅。在Column的第二個位置是一個Flexible用來填充剩余的空間亩码，在Flexible里面放置了一個Center組件，Center組件里則是一個Text用來顯示“Hello野瘦，World”描沟。 - （5）處表示這個應用的第一個見面就是
MyScaffold。
這種flutter這種層層包裹的感覺就是前面提到的組件外構建UI一小部分含義鞭光，眼尖的同學可能已經(jīng)看到（6）處的title使用的是final修飾符吏廉，這里要說明一下繼承自StatelessComponent的組件，如內部有配置惰许，屬性或狀態(tài)的統(tǒng)一需要使用final修飾符席覆，表示這個組件本身自己是無狀態(tài)的，需要依賴它外部的其他組件汹买。這也是'組件外構建UI'最重要的含義所在佩伤。
Material應用
上面那個應用我們使用自己的組件進行應用開發(fā)，發(fā)現(xiàn)應用整體美觀度不高晦毙。是因為flutter中應用界面會撐滿整個屏幕生巡，所以有一部分內容可能會被狀態(tài)欄擋住。其實flutter提供了一系列的控件供開發(fā)人員開發(fā)Material風格的應用结序，這之中就有MaterialApp障斋，Scaffold，ToolBar和FloatingActionButton等徐鹤。下面看一個使用了這些控件的例子：
修改main.dart內容如下：
import 'package:flutter/material.dart';
void main() {
runApp(new MaterialApp(
title: 'Flutter Tutorial',
routes: {'/': (RouteArguments args) => new TutorialHome()}));
}
class TutorialHome extends StatelessComponent {
Widget build(BuildContext context) {
return new Scaffold(
toolBar: new ToolBar(
left: new IconButton(icon: 'navigation/menu'),
center: new Text('Example title'),
right: [new IconButton(icon: 'action/search')]),
body: new Center(child: new Text('Hello, world!')),
floatingActionButton:
new FloatingActionButton(child: new Icon(icon: 'content/add')));
}
}
修改flutter.yaml文件內容如下：
name: my_app
material-design-icons:
- name: action/search
- name: content/add
- name: navigation/menu
運行結果如下：
現(xiàn)在我們的應用看起來是不是更像是一個Material Design的應用了垃环？我們使用的Scaffold和ToolBar讓ToolBar自帶了陰影并且字體風格有有了調整。另外還加上了FloatingActionButton返敬。
總結
本文主要講解flutter中的組件分類遂庄，對如何創(chuàng)建簡單Stateless組件進行了演示
