Spacer
初始狀態
- 設置三個按鈕,順序排列
- 在AB兩個按鈕之間加一行
Spacer()
- 在BC兩個按鈕之間也加一行
Spacer()
總結
Spacer() 相當於彈簧的效果,使兩個控件之間的距離達到最大值. (在頁面不可滑動時纔有效果)
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的比例來分割主軸的全部空閒空間。
以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等子組件如何佈局的組件。
Flexible組件可以使Row、Column、Flex等子組件在主軸方向有填充可用空間的能力(例如，Row在水平方向，Column在垂直方向)，但是它與Expanded組件不同，它不強制子組件填充可用空間。
三個控件flex都是1, 左圖第三個控件是Flexible, 右圖第三個控件是Expanded (其他屬性一模一樣) 
可以看出:
**Row、Column、Flex會被Expanded撐開，充滿主軸可用空間. **
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 控件讓其填充父容器的空白區域