Flutter之StatefulWidget與StatelessWidget

Flutter中一切皆Widget

Widget是組件視覺效果的封裝，是UI界面的載體，而build方法則是Flutter框架構建UI界面的實現

在build方法中，通常會通過對基礎Widget進行相應的UI配置，或是組合各類基礎Widget的方式進行UI的定製化操作。

StatefulWidget和StatelessWidget是Widget的兩個子類

StatelessWidget

Flutter中的StatelessWidget是一個不需要更改狀態的Widget，即StatelessWidget沒有需要管理的內部狀態，是一個無狀態的Widget

AboutDialog、CircleAvatar、Text等都是StatelessWidget的子類

StatefulWidget

StatefulWidget是可變狀態的Widget，即StatefulWidget依賴的數據在Widget生命週期中可能會頻繁的發生變化。使用setState方法管理StatefulWidget的狀態的改變

setState方法是Flutter已數據驅動視圖更新的關鍵函數，它會通知Flutter框架有狀態發生了改變，而當Flutter框架收到通知後，會執行Widget的build方法，根據新的狀態重建此Widget

注意：狀態的更改一定要配合使用setState方法。通過setState方法的調用，Flutter會在底層標記Widget的狀態，進而觸發Widget重建

Widget只是視圖的“配置信息”，是數據的映射

在使用Widget時，該如何選擇使用StatefulWidget還是StatelessWidget呢

在Flutter中，Widget是有狀態的還是無狀態的，取決於他們依賴於狀態的變化

• 有狀態：用戶交互或數據改變會導致Widget改變
• 無狀態：一個Widget是最終態的或不可改變的

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  ...
  @override
  Widget build(BuildContext context) {
    ...
  }
}

從以上代碼可以看出：StatelessWidget中有一個build方法返回Widget；而StatefulWidget中並沒有一個build方法返回Widget，而是多了一個createState方法返回_MyHomePageState對象，而build方法則包含在_MyHomePageState這個類中

已同步更新至微信公衆號，歡迎關注“Android小白營”