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。