Flutter學習筆記之理解widget樹

• Widget樹是我們創建UI的方式，在Flutter中我們經常看到或聽到這樣一句話：一切皆Widget，Widget地獄嵌套，為了代碼更容易理解：盡可能的保持Widget樹層級較淺，
  Material Design：Widget樹的屬性
  Scaffold：腳手架，實作Material可視化布局
  AppBar：界面頂部實作工具列
  CircleAvatar：顯示一張圓形用戶資料照片，可用于任何圖片
  Divider：繪制一條具有上下邊距的水平線
  SingleChildScrollView：可將垂直或水平滾動能力增加到單個子Widget上，防止螢屏溢位，內容過多時不建議使用，影響性能
  Padding：可添加上、下、左、右內邊距
  Column：顯示子Widget縱向串列
  Row：顯示子Widget橫向串列
  Container：可用于空白占位符（不可見），也可設定其它屬性靈活運用
  Expanded：可填充從屬于Column或Row Widget的子Widget可用空間
  Text：界面顯示的文本
  Stack：層疊組件、絕對定位
  Positioned：允許設定寬高，與Stack結合使用，指定Stack Widget上、下、左、右四邊的定位距離

//引入Material風格庫，使用Material風格組件
import 'package:flutter/material.dart';
//創建有狀態Widget
class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
//創建變數，初始值0
  int _counter = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Widget Tree'),
      ),
      body: SafeArea(//SafeArea適配螢屏安全區
        child: SingleChildScrollView(//防止Widget螢屏滾動溢位
          child: Padding(//內邊距
            padding: EdgeInsets.all(16.0),//上下左右邊距16
            child: Column（//縱向串列，可放置多個子Widget
              children: <Widget>[
                const RowWidget(),//Widget
                Padding(
                  padding: EdgeInsets.all(16.0),
                ),
                const RowAndColumnWidget(),//Widget
                CounterTextWidget(counter: _counter),//Widget
                TextButton(//按扭
                  child: Text('Add to Counter'),
                  //點擊事件宣染界面變化值
                  onPressed: () {
                    setState(() {
                    //回呼方法
                      _addToCounter();
                    });
                  },
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
//自定義方法函式
  void _addToCounter() {
    return setState(() {
      _counter++;
    });
  }
}
//構建自定義類Widget
class CounterTextWidget extends StatelessWidget {
//使用const關鍵字得到快取性能優勢 
  const CounterTextWidget({
    Key key,
    @required int counter,
  })  : _counter = counter,
        super(key: key);

  final int _counter;

  @override
  Widget build(BuildContext context) {
    print('CounterTextWidget $_counter');

    return Text('CounterTextWidget $_counter');
  }
}
//構建類Widget
class RowWidget extends StatelessWidget {
  const RowWidget({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    print('RowWidget');

    return Row(
      children: <Widget>[
        Container(
          color: Colors.yellow,
          height: 40.0,
          width: 40.0,
        ),
        Padding(
          padding: EdgeInsets.all(16.0),
        ),
        Expanded(
          child: Container(
            color: Colors.amber,
            height: 40.0,
            width: 40.0,
          ),
        ),
        Padding(
          padding: EdgeInsets.all(16.0),
        ),
        Container(
          color: Colors.brown,
          height: 40.0,
          width: 40.0,
        ),
      ],
    );
  }
}
//構建類Widget
class RowAndColumnWidget extends StatelessWidget {
  const RowAndColumnWidget({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    print('RowAndColumnWidget');

    return Row(
      children: <Widget>[
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisSize: MainAxisSize.max,
          children: <Widget>[
            Container(
              color: Colors.yellow,
              height: 60.0,
              width: 60.0,
            ),
            Padding(
              padding: EdgeInsets.all(16.0),
            ),
            Container(
              color: Colors.amber,
              height: 40.0,
              width: 40.0,
            ),
            Padding(
              padding: EdgeInsets.all(16.0),
            ),
            Container(
              color: Colors.brown,
              height: 20.0,
              width: 20.0,
            ),
            Divider(),
            //呼叫RowAndStackWidget
            const RowAndStackWidget(),
            Divider(),
            Text('End of the Line. Date: ${DateTime.now()}'),
          ],
        ),
      ],
    );
  }
}
//構建類Widget
class RowAndStackWidget extends StatelessWidget {
  const RowAndStackWidget({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    print('RowAndStackWidget');

    return Row(
      children: <Widget>[
        CircleAvatar(
          backgroundColor: Colors.lightGreen,
          radius: 100.0,
          child: Stack(
            children: <Widget>[
              Container(
                height: 100.0,
                width: 100.0,
                color: Colors.yellow,
              ),
              Container(
                height: 60.0,
                width: 60.0,
                color: Colors.amber,
              ),
              Container(
                height: 40.0,
                width: 40.0,
                color: Colors.brown,
              ),
            ],
          ),
        ),
      ],
    );
  }
}

• 以上代碼使用了類Widget提高代碼理解可閱讀性
• 除了用類構建Widget還可以用常量與方法函式構建Widget,注意在使用常量初始化時Widget會依賴父Widget的BuildContext物件，每次重繪父Widget，常量也會重繪，因此無進行性能優化，所以不推薦使用，方法函式Widget同理，下面我看一下常量widget與方法函式Widget的寫法：

//常量Widget
final container = Container(
	conlor:Colors.Blue,
	height:40,
	width:40);
//方法Widget
Widget _buildContainer(){
	return Container(
		color:Colors.Blue,
		height:40,
		width:40,
	);
   }