Widget

Flutter Widget采用現(xiàn)代響應(yīng)式框架構(gòu)建，這是從 React 中獲得的靈感，中心思想是用widget構(gòu)建你的UI。 Widget描述了他們的視圖在給定其當(dāng)前配置和狀態(tài)時應(yīng)該看起來像什么。當(dāng)widget的狀態(tài)發(fā)生變化時，widget會重新構(gòu)建UI，F(xiàn)lutter會對比前后變化的不同， 以確定底層渲染樹從一個狀態(tài)轉(zhuǎn)換到下一個狀態(tài)所需的最小更改。

給我的感覺，萬物皆為Widget。Android xml中的layout是Widget，ViewGroup是Widget，View也是Widget...

一個最簡單的Android app是在是在activity.main.xml中定義一個"hello world"；一個最簡單的Flutter應(yīng)用也是一樣，只需一個widget即可！代碼如下：

import 'package:flutter/material.dart';

void main() {
  runApp(
    new Center(
      child: new Text(
        'Hello, world!',
        textDirection: TextDirection.ltr,
      ),
    ),
  );
}

runApp()方法類似于程序的入口，給定的是一個widget的根。一般這個widget都會指定一個無狀態(tài)的StatelessWidget或者是有狀態(tài)的StatefulWidget。
無狀態(tài)的StatelessWidget只能用來展示信息，不能有動作（用戶交互）;有狀態(tài)的StatefulWidget可以通過改變狀態(tài)使得 UI 發(fā)生變化，它可以包含用戶交互。

按照Flutter中文網(wǎng)的學(xué)習(xí)引導(dǎo)，我們剛開始接觸的Widget就是StatelessWidget和StatefulWidget，下面來做一個初步的講解。

StatelessWidget

A widget that does not require mutable state.
譯為：不需要可變狀態(tài)的控件。

• Stateless widgets 是不可變的, 這意味著它們的屬性不能改變 - 所有的值都是最終的。
• StatelessWidget一共只有三個方法:

  // 構(gòu)造方法
  const StatelessWidget({ Key key }) : super(key: key);
  
  // createElement方法復(fù)寫Widget方法，一般不需要使用
  @override
  StatelessElement createElement() => StatelessElement(this);

  // 用戶界面的構(gòu)建，描述此控件顯示到用戶界面部分。
  @protected
  Widget build(BuildContext context);

StatelessWidget 的使用非常簡單，我們只需要繼承 StatelessWidget，然后實現(xiàn) build 方法就可以了。 demo示例代碼如下：

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Welcome to Flutter',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Welcome to Flutter'),
        ),
        body: new Center(
          child: new Text('Hello World'),
        ),
      ),
    );
  }
}

StatefulWidget

A widget that has mutable state.
譯為：具有可變狀態(tài)的控件。

• Stateful widgets 持有的狀態(tài)可能在widget生命周期中發(fā)生變化. 實現(xiàn)一個 stateful widget 至少需要兩個類:
  • 一個 StatefulWidget類。
  • 一個 State類。 StatefulWidget類本身是不變的，但是 State類在widget生命周期中始終存在。
• StatefulWidget一共只有三個方法:

  // 構(gòu)造方法
  const StatefulWidget({ Key key }) : super(key: key);
  
  // createElement方法復(fù)寫Widget方法，一般不需要使用
  @override
  StatefulElement createElement() => StatefulElement(this);

  // 在視圖樹中的給定位置為這個控件創(chuàng)建可變狀態(tài)。
  @protected
  State createState();

StatefulWidget 用起來麻煩一些，它除了需要繼承自StatefulWidget，還需要一個 State。demo示例代碼如下：

import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Welcome to Flutter',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Welcome to Flutter'),
        ),
        body: new Center(
          child: new RandomWords(),
        ),
      ),
    );
  }
}

class RandomWords extends StatefulWidget {
  @override
  createState() => new RandomWordsState();
}

class RandomWordsState extends State<RandomWords> {
  @override
  Widget build(BuildContext context) {
    final wordPair = new WordPair.random();
    return new Text(wordPair.asPascalCase);
  }
}

總結(jié)

從代碼層面來看，貌似 StatelessWidget 與 StatefulWidget 差別不是很大，都是在 MyApp 的 build() 方法里返回一個Widget對象，只不過 StatefulWidget 需要額外設(shè)置實現(xiàn)一個 createState() 方法而已。實際上，兩者的區(qū)別非常大。 StatelessWidget 整個生命周期里都不會改變，所以 build 方法只會執(zhí)行一次。而 StatefulWidget 只要狀態(tài)改變，就會調(diào)用 build() 方法重新創(chuàng)建 UI。