Flutter 佈局

Flutter 佈局遵循的原則：

1. 深度優先遍歷渲染對象樹原則
2. 不同的視圖實現不同的佈局邏輯，佈局邏輯決定其子視圖的位置
3. 父視圖的約束決定子視圖的大小
4. 子視圖的尺寸也會影響父視圖

自己總結，以下是論證：

1、深度優先遍歷。我們寫Flutter的視圖樹代碼就可以看的出來。也無需贅敘。

 

2、應用官方文檔的的圖片

Row和Column 爲不同的組件。其內部則實現了對子視圖的不同的佈局。（Row和Column的使用參見）

 

3、父視圖的約束決定子視圖的大小

綠色視圖Container邊界設置是Edge 。LTRB(20.0, 30.0, 20.0, 20.0) 。其子視圖Column的寬度就會充滿父視圖.

Container(
          height: height,
          padding:new EdgeInsets.fromLTRB(20.0, 30.0, 20.0, 20.0),
          color: Colors.green,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget> [
              Container (
                  padding: EdgeInsets.only(bottom: 10.0),
                  height: 80,
                  color: Colors.blue[400],
                  child:_inputItem(Icons.supervisor_account,'賬號:', false, _accountController)
              ),
              Container (
                  padding: EdgeInsets.only(top: 20.0),
                  height: 90,
                  color: Colors.orange,
                  child:_inputItem(Icons.https, '密碼:', true, _passwordController)
              ),
);

4、子視圖的尺寸也會影響父視圖

棕色的視圖(Container)沒有子視圖時的展示，是適應其父視圖（Colummn）

當我們在棕色的視圖裏添加上一個RaisedButton時。就顯示如下。

 Container(
          height: height,
          padding:new EdgeInsets.fromLTRB(20.0, 30.0, 20.0, 20.0),
          color: Colors.green,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget> [
              Container (
                  padding: EdgeInsets.only(bottom: 10.0),
                  height: 80,
                  color: Colors.blue[400],
                  child:_inputItem(Icons.supervisor_account,'賬號:', false, _accountController)
              ),
              Container (
                  padding: EdgeInsets.only(top: 20.0),
                  height: 90,
                  color: Colors.orange,
                  child:_inputItem(Icons.https, '密碼:', true, _passwordController)
              ),
              Container (
                padding: EdgeInsets.fromLTRB(20, 80, 20, 30),
                width: width - 20 *2,
                color: Colors.brown[300],
                child: new RaisedButton (
                  padding: EdgeInsets.fromLTRB(10, 5, 10, 5),
                  shape: const RoundedRectangleBorder(
                      side: BorderSide(width: 1,color: Colors.blueGrey),
                      borderRadius: BorderRadius.all(Radius.circular(5))
                  ),
                  color: Colors.white,
                  splashColor: Colors.green,
                  onPressed:() => _pushToHomePage(context),
                  child: Text("登 錄",
                    style: new TextStyle(
                      fontSize: 24,
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),

故 ：子視圖的尺寸也會影響父視圖。

 

以上Flutter 的demo （ Flutter_Demo ）  

 

參考：https://flutterchina.club/tutorials/layout/