Flutter入門之無狀態組件

Flutter核心理念

flutter組件採用函數式響應框架構建，它的靈感來自於React。它設計的核心思想是組件外構建UI，簡單解釋一下就是組件鑑於它當前的配置和狀態來描述它的視圖應該是怎樣的，當組件的狀態發生改變，組件會重構它的配置和狀態（這些配置和狀態是在組件外部重構的，內部的配置和狀態都不可變的）。而後底層框架會將最新的配置和狀態與先前的作對比，由此產生一個最小的差值，並由此差值來決定底層渲染樹從舊狀態過分到新狀態。

Hello World

首先咱們先來寫一個最基本的flutter應用吧。

1.在適當的目錄執行：

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目錄下執行：

flutter start

4.你將會在手機上看到：

若是你能一切順利的來到這裏，那麼恭喜你，你已經成功使用flutter開發了一個android的應用，雖然這個應用看上去比較單一。

main方法是這個應用的入口，要運行一個應用的話須要使用runApp方法，它接收一個Widget控件做爲參數，而且把這個控件做爲控件樹的根節點。在咱們這個例子裏，控件樹裏有兩個控件，Center控件和它的子節點Text。一般狀況下框架會強制將根控件充滿整個屏幕，因此相對的Text控件就以屏幕爲中心了。

重要概念：
在編寫flutter應用的時候，一般狀況下須要自定義組件，這些組件繼承自StatelessComponent或StatefulComponent,選擇要繼承哪個取決於這個組件是否須要管理狀態和配置。一個組件的主要工做就是實現build方法，這個方法用來反應該組件在其餘組件中的表現形式。最後底層框架會統一從上到下調用build方法直至渲染樹的最底層。

基本控件

flutter提供了一套完備的基本控件，最經常使用的有以下幾個：

• Text ：Text提供了一個用來顯示文本的一次性控件（即無狀態）。
• 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是咱們自定義的一個無狀態組件，經過build方法，咱們能夠看出其最外層是一個Container控件，控件高爲56dp,左右內邊距8dp，它由一個BoxDecoration作修飾，修飾內容是將背景顏色改成Colors.blue[500]這種顏色。Container的內部是一個Row，Row的兩端分別是一個圖標按鈕，中間是另外一個控件Flexible，它的做用是填充掉Row的剩餘部分。在Flexible中傳入的是title這個內部字段。
• （4）處的MyScaffold組件將其子節點用垂直的方式組織起來，在Column的第一個位置是咱們自定義的MyToolBar，在構造MyToolBar的時候將一個Text控件做爲它的命名可選參數title的值傳遞進去。在Column的第二個位置是一個Flexible用來填充剩餘的空間，在Flexible裏面放置了一個Center組件，Center組件裏則是一個Text用來顯示「Hello，World」。
• （5）處表示這個應用的第一個見面就是MyScaffold。

這種flutter這種層層包裹的感受就是前面提到的組件外構建UI一小部分含義，眼尖的同窗可能已經看到（6）處的title使用的是final修飾符，這裏要說明一下繼承自StatelessComponent的組件，如內部有配置，屬性或狀態的統一須要使用final修飾符，表示這個組件自己本身是無狀態的，須要依賴它外部的其餘組件。這也是'組件外構建UI'最重要的含義所在。

Material應用

上面那個應用咱們使用本身的組件進行應用開發，發現應用總體美觀度不高。是由於flutter中應用界面會撐滿整個屏幕，因此有一部份內容可能會被狀態欄擋住。其實flutter提供了一系列的控件供開發人員開發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

運行結果以下：

如今咱們的應用看起來是否是更像是一個Material Design的應用了？咱們使用的Scaffold和ToolBar讓ToolBar自帶了陰影而且字體風格有有了調整。另外還加上了FloatingActionButton。

總結

本文主要講解flutter種的無狀態組件，即繼承自StatelessComponent的組件。它們的特色就是本身內部的配置屬性都使用final修飾符，強制其自身沒法修改自身狀態。下一節將講解StatefulComponent。