flutter布局-2-row

Row

連載:flutter布局-1-column

1、mainAxisAlignment:主軸布局方式,row主軸方向是水平方向

mainaxis.png

默認(rèn)值:MainAxisAlignment.start:

  1. start ,沿著主軸方向(水平方向)頂部對(duì)齊;
  2. end,沿著主軸方向(水平方向)底部對(duì)齊;
  3. center,沿著主軸方向(水平方向)居中對(duì)齊;
  4. spaceBetween ,沿著主軸方向(水平方向)平分剩余空間
  5. spaceAround,把剩余空間平分成n份,n是子widget的數(shù)量,然后把其中一份空間分成2份,放在第一個(gè)child的前面,和最后一個(gè)child的后面;
    6.spaceEvenly,把剩余空間平分n+1份,然后平分所有的空間,請(qǐng)注意和spaceAround的區(qū)別;

2、crossAxisAlignment: 交叉軸的布局方式,對(duì)于row來說就是垂直方向的布局方式

mainaxis.png

默認(rèn)值:CrossAxisAlignment.center,默認(rèn)是水平居中

  1. start ,垂直主軸方向(垂直方向)頂部對(duì)齊;
  2. end,垂直主軸方向(垂直方向)底部對(duì)齊;
  3. center,垂直主軸方向(垂直方向)居中對(duì)齊;
  4. stretch ,垂直主軸方向(垂直方向)拉伸子child;
  5. baseline,這個(gè)要和textBaseline一起使用,;

3、textBaseline:字體的基線(基線這東西一直沒搞懂,具體詳見下一章Row,效果更明顯,垂直方向沒啥用,不明顯)

WX20181104-143705@2x.png

默認(rèn)值:是空的

  1. alphabetic ,用于對(duì)齊字母字符底部的水平線;
  2. ideographic,用于對(duì)齊表意字符的水平線,可以看出劉成下沉一點(diǎn),abc上浮了,;

4、textDirection:文字布局方向

默認(rèn)值:沒有,

  1. TextDirection.ltr ,從左到右;
  2. TextDirection.rtl,從右到做布局;

5、verticalDirection:就是字child的垂直布局方向,向上還是向下,但是在row下這個(gè)不起作用

默認(rèn)值:VerticalDirection.down 也就是從上到下的布局

  1. down ,從上向下布局,上圖示例我的代碼是紅、藍(lán)、黃;
  2. up,反過來從下向上布局,反過來就是黃、藍(lán)、紅;
?著作權(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),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

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

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