Flutter控件佈局 - Spacer, Flex , Expanded , Flexible, Padding

Spacer

初始狀態

設置三個按鈕,順序排列

在AB兩個按鈕之間加一行 Spacer()

在BC兩個按鈕之間也加一行 Spacer()

總結

Spacer() 至關於彈簧的效果,使兩個控件之間的距離達到最大值. (在頁面不可滑動時纔有效果)app

Flex

Flex 是 Row和Column的父組件. Flex組件能夠沿着水平或垂直方向排列子組件，若是你知道主軸方向，使用Row或Column會方便一些，由於Row和Column都繼承自Flex，參數基本相同，因此能使用Flex的地方基本上均可以使用Row或Column。Flex自己功能是很強大的，它也能夠和Expanded組件配合實現彈性佈局。佈局

Expanded

能夠按比例「擴伸」 Row、Column和Flex子組件所佔用的空間。字體

const Expanded({
  int flex = 1, 
  @required Widget child,
})

flex參數爲彈性係數，若是爲0或null，則child是沒有彈性的，即不會被擴伸佔用的空間。若是大於0，全部的Expanded按照其flex的比例來分割主軸的所有空閒空間。flex

以1:1:2:2的比例,排列A , 佔位空白, B , C

child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Expanded(
              flex: 1,
              child: RaisedButton(
                color: Colors.yellow,
                splashColor: Colors.green,
                onPressed: () {},
                child: Text("A"),
                textColor: Color(0xffFfffff),
                padding: EdgeInsets.all(8),
                elevation: 5,
                highlightColor: Color(0xffF88B0A),
              ),
            ),
            Spacer(
              //Spacer的功能是佔用指定比例的空間
              flex: 1,
            ),
            Expanded(
              flex: 2,
              child: RaisedButton(
                color: Colors.green,
                splashColor: Colors.green,
                onPressed: () {},
                child: Text("B"),
                textColor: Color(0xffFfffff),
                padding: EdgeInsets.all(8),
                elevation: 5,
                highlightColor: Color(0xffF88B0A),
              ),
            ),
            Expanded(
              flex: 2,
              child: RaisedButton(
                color: Colors.blue,
                splashColor: Colors.blue,
                onPressed: () {},
                child: Text("C"),
                textColor: Color(0xffFfffff),
                padding: EdgeInsets.all(8),
                elevation: 5,
                highlightColor: Color(0xffF88B0A),
              ),
            ),
          ],
        ),
      ),

Flexible

Flexible是一個控制Row、Column、Flex等子組件如何佈局的組件。ui

Flexible組件可使Row、Column、Flex等子組件在主軸方向有填充可用空間的能力(例如，Row在水平方向，Column在垂直方向)，可是它與Expanded組件不一樣，它不強制子組件填充可用空間。url

三個控件flex都是1, 左圖第三個控件是Flexible, 右圖第三個控件是Expanded (其餘屬性如出一轍) .net

能夠看出:code

**Row、Column、Flex會被Expanded撐開，充滿主軸可用空間. **blog

Flexible並不會強制子組件填充可用空間,子組件實際大小是多少,它就是多大.繼承

特別注意

Expanded、Flexible只在Row、Column組件使用。

Expanded、Flexible在「Container、Padding、Stack」組件中會報錯: The ParentDataWidget Expanded(flex: 1) wants to apply ParentData of type Fle

Padding

Padding可容納一個子組件,添加自身內邊距來限制孩子組件的佔位,核心屬性爲padding.

Container(
                color: Colors.red,
                width: 200,
                height: 150,
                child: Padding(
                  padding: EdgeInsets.all(20),
                  child: RaisedButton(
                    color: Colors.blue,
                    splashColor: Colors.blue,
                    onPressed: () {},
                    child: Text("C"),
                    textColor: Color(0xffFfffff),
                    padding: EdgeInsets.all(8),
                    elevation: 5,
                    highlightColor: Color(0xffF88B0A),
                  ),
                ),
              ),

關於Padding和Expanded

對於有着固定間距的視覺元素，能夠經過 Padding 對其進行包裝.
對於大小伸縮可變的視覺元素，能夠經過 Expanded 控件讓其填充父容器的空白區域