Spacer
初始狀態(tài)
- 設(shè)置三個(gè)按鈕,順序排列
- 在AB兩個(gè)按鈕之間加一行
Spacer()
- 在BC兩個(gè)按鈕之間也加一行
Spacer()
總結(jié)
Spacer() 相當(dāng)于彈簧的效果,使兩個(gè)控件之間的距離達(dá)到最大值. (在頁面不可滑動(dòng)時(shí)才有效果)
Flex
Flex 是 Row和Column的父組件.
Flex組件可以沿著水平或垂直方向排列子組件，如果你知道主軸方向媒楼，使用Row或Column會(huì)方便一些贸桶，因?yàn)镽ow和Column都繼承自Flex椎麦，參數(shù)基本相同，所以能使用Flex的地方基本上都可以使用Row或Column衣厘。Flex本身功能是很強(qiáng)大的窖梁，它也可以和Expanded組件配合實(shí)現(xiàn)彈性布局。
Expanded
可以按比例“擴(kuò)伸” Row髓考、Column和Flex子組件所占用的空間。
const Expanded({
int flex = 1,
@required Widget child,
})
flex參數(shù)為彈性系數(shù)弃酌，如果為0或null氨菇，則child是沒有彈性的，即不會(huì)被擴(kuò)伸占用的空間妓湘。如果大于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是一個(gè)控制Row多柑、Column奶是、Flex等子組件如何布局的組件。
Flexible組件可以使Row竣灌、Column、Flex等子組件在主軸方向有填充可用空間的能力(例如秆麸，Row在水平方向初嘹，Column在垂直方向)，但是它與Expanded組件不同沮趣，它不強(qiáng)制子組件填充可用空間屯烦。
三個(gè)控件flex都是1, 左圖第三個(gè)控件是Flexible, 右圖第三個(gè)控件是Expanded (其他屬性一模一樣)
可以看出:
**Row、Column、Flex會(huì)被Expanded撐開驻龟，充滿主軸可用空間. **
Flexible并不會(huì)強(qiáng)制子組件填充可用空間,子組件實(shí)際大小是多少,它就是多大.
特別注意
Expanded温眉、Flexible只在Row、Column組件使用翁狐。
Expanded类溢、Flexible在“Container、Padding露懒、Stack”組件中會(huì)報(bào)錯(cuò): The ParentDataWidget Expanded(flex: 1) wants to apply ParentData of type Fle
Padding
Padding可容納一個(gè)子組件,添加自身內(nèi)邊距來限制孩子組件的占位,核心屬性為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),
),
),
),
關(guān)于Padding和Expanded
- 對(duì)于有著固定間距的視覺元素闯冷，可以通過 Padding 對(duì)其進(jìn)行包裝.
- 對(duì)于大小伸縮可變的視覺元素，可以通過 Expanded 控件讓其填充父容器的空白區(qū)域
