Flutter教學(xué)目錄持續(xù)更新中

github源代碼持續(xù)更新中

1.Row/Column介紹

Row：在水平方向上排列子widget的列表隘冲。
Column：在垂直方向上排列子widget的列表闹瞧。
注意：這兩個(gè)屬于多子節(jié)點(diǎn)空間，可以將children排列成一行/一列展辞，但是自身不帶滾動(dòng)屬性奥邮，如果超出了一行，在debug下面則會(huì)顯示溢出的提示罗珍。

2.屬性介紹

MainAxisAlignment：主軸方向上的對(duì)齊方式洽腺，會(huì)對(duì)child的位置起作用，默認(rèn)是start覆旱。
其中MainAxisAlignment枚舉值：
center：將children放置在主軸的中心蘸朋；
end：將children放置在主軸的末尾；
spaceAround：將主軸方向上的空白區(qū)域均分扣唱，使得children之間的空白區(qū)域相等藕坯，但是首尾child的空白區(qū)域?yàn)?/2；
spaceBetween：將主軸方向上的空白區(qū)域均分噪沙，使得children之間的空白區(qū)域相等炼彪，首尾child都靠近首尾，沒有間隙正歼；
spaceEvenly：將主軸方向上的空白區(qū)域均分辐马，使得children之間的空白區(qū)域相等，包括首尾child局义；
start：將children放置在主軸的起點(diǎn)喜爷；
其中spaceAround冗疮、spaceBetween以及spaceEvenly的區(qū)別，就是對(duì)待首尾child的方式檩帐。其距離首尾的距離分別是空白區(qū)域的1/2术幔、0、1轿塔。
MainAxisSize：在主軸方向占有空間的值特愿，默認(rèn)是max。
MainAxisSize的取值有兩種：
max：根據(jù)傳入的布局約束條件勾缭，最大化主軸方向的可用空間；
min：與max相反目养，是最小化主軸方向的可用空間俩由；
CrossAxisAlignment：children在交叉軸方向的對(duì)齊方式，與MainAxisAlignment略有不同癌蚁。
CrossAxisAlignment枚舉值有如下幾種：
baseline：在交叉軸方向幻梯，使得children的baseline對(duì)齊；
center：children在交叉軸上居中展示努释；
end：children在交叉軸上末尾展示碘梢；
start：children在交叉軸上起點(diǎn)處展示；
stretch：讓children填滿交叉軸方向伐蒂；
TextDirection：阿拉伯語系的兼容設(shè)置煞躬，一般無需處理。
VerticalDirection：定義了children擺放順序逸邦，默認(rèn)是down恩沛。
VerticalDirection枚舉值有兩種：
down：從top到bottom進(jìn)行布局；
up：從bottom到top進(jìn)行布局缕减。
top對(duì)應(yīng)Row以及Column的話雷客，就是左邊和頂部，bottom的話桥狡，則是右邊和底部搅裙。
TextBaseline：使用的TextBaseline的方式，有兩種裹芝，前面已經(jīng)介紹過部逮。

3.Expanded介紹

這個(gè)是Row/Column的內(nèi)的小控件，可以用來實(shí)現(xiàn)權(quán)重的布局

4.上代碼

這邊使用一個(gè)Container局雄，里面是Row甥啄，使用Expanded對(duì)子節(jié)點(diǎn)進(jìn)行權(quán)重處理，如果不使用Expanded炬搭，直接放入其他控件也是可以的蜈漓，只是無法設(shè)置權(quán)重

1600326860530.jpg

 Container(
            color: Colors.grey,
            padding: EdgeInsets.only(top: 10, bottom: 10),
            margin: EdgeInsets.only(top: 10),
            child: Row(
              children: [
                Expanded(
                  child: Text(
                    'Deliver features faster',
                    textAlign: TextAlign.center,
                  ),
                  flex: 1,
                ),
                Expanded(
                  flex: 1,
                  child: Text(
                    'Craft beautiful UIs',
                    textAlign: TextAlign.center,
                  ),
                ),
                Expanded(
                  child: FlutterLogo(),
                  flex: 2,
                ),
                FlutterLogo(),
                FittedBox(
                  fit: BoxFit.contain,
                  child: FlutterLogo(),
                ),
                Expanded(
                  child: FittedBox(
                    fit: BoxFit.contain,
                    child: FlutterLogo(),
                  ),
                )
              ],
            ),
          ),

對(duì)于內(nèi)容過長的時(shí)候穆桂，會(huì)有溢出提示：

1600326871195.jpg

Container(
            color: Colors.grey,
            margin: EdgeInsets.only(top: 10),
            padding: EdgeInsets.only(top: 10, bottom: 10),
            child: Row(
              children: [
                FlutterLogo(),
                Text(
                  '111111111111111111111111111111111111111111111111111111111111111111111111',
                  textAlign: TextAlign.center,
                ),
                Icon(Icons.add_shopping_cart)
              ],
            ),
          ),

MainAxisAlignment.center：將children放置在主軸的中心；

1600326970392.jpg

MainAxisAlignment.start：將children放置在主軸的起點(diǎn)融虽；

1600326991927.jpg

MainAxisAlignment.end：將children放置在主軸的末尾享完；

1600327011021.jpg

MainAxisAlignment.spaceAround：將主軸方向上的空白區(qū)域均分，使得children之間的空白區(qū)域相等有额，但是首尾child的空白區(qū)域?yàn)?/2般又；

1600327032942.jpg

MainAxisAlignment.spaceBetween：將主軸方向上的空白區(qū)域均分，使得children之間的空白區(qū)域相等巍佑，首尾child都靠近首尾茴迁，沒有間隙；

1600327053230.jpg

MainAxisAlignment.spaceEvenly：將主軸方向上的空白區(qū)域均分萤衰，使得children之間的空白區(qū)域相等堕义，包括首尾child；

1600327085557.jpg

下一章我們學(xué)習(xí)基礎(chǔ)組件之Image

Flutter（6）：基礎(chǔ)組件之Image

Flutter教學(xué)目錄持續(xù)更新中

github源代碼持續(xù)更新中