這節(jié)開始講介紹容器類組件介紹,首先介紹Row/Column Widget,它可以在橫向/縱向包含一組widget組件。
Row Widget屬性介紹
一個(gè)小部件,用于在水平數(shù)組中顯示其子項(xiàng)。
要使子項(xiàng)擴(kuò)展以填充可用的水平空間,請(qǐng)將子項(xiàng)包裝在Expanded小部件中。
“行”窗口小部件不會(huì)滾動(dòng)(并且通常將行中的子項(xiàng)多于可用空間中的子項(xiàng)被視為錯(cuò)誤)。 如果您有一系列小部件并希望它們能夠在沒有足夠空間的情況下滾動(dòng),請(qǐng)考慮使用ListView。
- children在橫向上包含一系列widget組件。
body: Row(
children: <Widget>[
Text("Text1"),
RaisedButton(child: Text("RaisedButton1"),),
RaisedButton(child: Text("RaisedButton2"),),
Text("Text2"),
],
),
-
mainAxisAlignment在flex中,子widget應(yīng)該如何沿著主軸放置。
start將子widget集合放置在容器起點(diǎn)的位置,默認(rèn)。
QQ截圖20190110110456.png
center 將子widget集合放置在容器中間的位置,
QQ截圖20190110110537.png
end 將子widget集合放置在容器末尾的位置,
QQ截圖20190110110556.png
spaceBetween 將空閑的控件均勻的分配在子widget集合中
QQ截圖20190110110716.png
spaceAround 將空閑的控件均勻的分配在子widget集合中,并且第一個(gè)和最后一個(gè)也存在一定的空閑。
QQ截圖20190110110920.png
spaceEvenly 將空閑的控件均勻的分配在子widget集合中,并且第一個(gè)和最后一個(gè)均勻分配。
QQ截圖20190110111054.png mainAxisSize 容器應(yīng)該占多大的空間
min 容器盡可能的占用最少的空閑空間,類似Android的wrap_content
max 容器盡可能的占用最多的空閑空間,類似Android的match_content-
crossAxisAlignment 在flex中,子widget應(yīng)該如何沿著橫軸放置。
start從容器的最左上面開始,橫向的放置子widget集合。
QQ截圖20190110112559.png
center從容器的垂直中間位置,橫向的放置子widget集合。
QQ截圖20190110113152.png
end從容器的垂直底部位置,橫向的放置子widget集合。
QQ截圖20190110113251.png
stretch橫向的放置子widget集合,并且填充橫軸。

QQ截圖20190110113506.png
- textDirection 這個(gè)屬性之前就介紹過,就不過多介紹了。
- verticalDirection 容器垂直流動(dòng)方向
- textBaseline用于對(duì)齊文本的水平線








