(6)、Study Flutter Row/Column Widget組件學(xué)習(xí)

這節(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ì)齊文本的水平線
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 本文介紹了Flutter應(yīng)用程序中Widget,State,BuildContext和InheritedWidge...
    __white閱讀 2,987評(píng)論 1 6
  • 總結(jié) 布局的計(jì)算過程 如果設(shè)置了最小尺寸(或者最小尺寸提示)、最大尺寸,則組件獲取的空間不能超過這些限制 如果沒有...
    勤勞的悄悄閱讀 1,692評(píng)論 0 0
  • Container Widget:一個(gè)結(jié)合了常見的繪畫,定位和大小調(diào)整的便利小部件。如果窗口小部件沒有子節(jié)點(diǎn),沒有...
    北有花開閱讀 533評(píng)論 0 0
  • 在Flutter中,號(hào)稱一切皆widget,手勢(shì)是Widget,動(dòng)畫是Widget,UI更是Widget,今天我們...
    Realank閱讀 4,698評(píng)論 0 7
  • 姓名:袁磊 公司:海南蔚藍(lán)時(shí)代實(shí)業(yè)有限公司 組別:第361期感謝二組 【日精進(jìn)打卡第 175天】 【知~學(xué)習(xí)】 《...
    三石_58fb閱讀 102評(píng)論 0 0

友情鏈接更多精彩內(nèi)容