Flutter基本组建——ROW,Column

2,132 阅读1分钟

1.Row

是一个水平展示子组件的组件,构造方法:Row

2.属性

  • mainAxisAlignment:设置主轴的对齐方式

    • start:从左往右排列
    • end:从右往左排列
    • center:居中排列
    • spaceBetween:首尾组件靠近两端,中间组件均匀分布
    • spaceAround:内部组件均匀分布,每个组件左右间距一样大
    • spaceEvenly:每一个都间隔相同
  • mainAxisSize:设置Row/Column的高宽值

    • max:相当于matchparent
    • min:相当于wrap_content
  • crossAxisAlignment:控制非主轴的对齐方式

    • start:按非主轴的正向方向
    • end:按非主轴的反向方向
    • center;居中排列
    • stretch:剧中排列并且完全充满
    • baseline;内部组件从baseline方向对齐,这个需要设置textBaseline属性,不然会报错。
  • textDirection:控制Row布局中子组件的摆放顺序

    • TextDirection.ltr 从左到右排列
    • TextDirection.rtl 从右到左排列
  • verticalDirection:控制Cloumn布局中内部子组件的摆放方式

    • VerticalDirection.up:从下到上排列
    • VerticalDirection.down:从上到下排列
  • textBaseline:设置字符的对齐基线,需要配合crossAxisAlignment来使用

    • TextBaseline.ideographic 用于表意字符的的水平线
    • TextBaseline.alphabetic 用于字母字符的水平线。

关于Expended组件

Row,Column,组件会被Expended撑开,充满主轴可用空间,flex相当于weight