Flutter&Dart

001--Flutter Widgets 之 Row和Colum

2020-07-13  本文已影响0人  清风烈酒2157

前言

RowColumn中有一个非常重要的概念:MainAxisAlignment(主轴)CrossAxisAlignment(交叉轴),简单来说,MainAxisAlignment(主轴)就是与当前控件方向一致的轴,而CrossAxisAlignment(交叉轴)就是与当前控件方向垂直的轴,比如Row的主轴是水平方向,交叉轴是垂直方向,而Column的主轴是垂直方向,交叉轴是水平方向。

RowColumn是多子控件的容器类控件,Row控件水平布局,Column控件垂直布局。

Row({
  ...  
  TextDirection textDirection,    
  MainAxisSize mainAxisSize = MainAxisSize.max,    
  MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
  VerticalDirection verticalDirection = VerticalDirection.down,  
  CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
  List<Widget> children = const <Widget>[],
})

主轴对齐方式

Row控件的主轴 mainAxisAlignment 对齐方式默认值是MainAxisAlignment.start,即子控件从开始处排列,这个开始处不一定是左边,是从左到右还是从右到左排列取决于文本方向textDirection属性,比如阿拉伯文本方向是从右到左的。

Row(
        children: <Widget>[
          Container(
            height: 50,
            width: 100,
            color: Colors.red,
          ),
          Container(
            height: 50,
            width: 100,
            color: Colors.green,
          ),
          Container(
            height: 50,
            width: 100,
            color: Colors.blue,
          ),
        ],
      )

效果如图:


image.png

黑色边框是Row控件的范围,默认情况下Row铺满父组件。主轴的对齐方式设置代码如下:

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  ...
)

spaceAround和spaceEvenly区别是:

交叉轴对齐方式

和主轴相对应的就是交叉轴crossAxisAlignment,交叉轴对齐方式默认是居中。Row控件的高度依赖子控件高度,因此子控件高都一样时,Row的高和子控件高相同,此时是无法体现交叉轴对齐方式,修改3个颜色块高分别为50,100,150,这样Row的高是150,代码如下:

Row(
        children: <Widget>[
          Container(
            height: 50,
            width: 100,
            color: Colors.red,
          ),
          Container(
            height: 100,
            width: 100,
            color: Colors.green,
          ),
          Container(
            height: 150,
            width: 100,
            color: Colors.blue,
          ),
        ],
      )

效果如下:


image.png

交叉轴属性设置代码如下:


Row(
  crossAxisAlignment: CrossAxisAlignment.center,
  ...
)

CrossAxisAlignment.stretch表示使子控件填满交叉轴。

textDirection和verticalDirection

属性textDirection控制水平方向布局,值包含TextDirection.ltr(从左到右)和TextDirection.rtl (从右到左),verticalDirection 控制垂直方向布局,值包含VerticalDirection.up(从上到下)和VerticalDirection.down(从下到上),用法如下:

Row(
  textDirection: TextDirection.rtl,
  ...
)
image.png

想一想这种效果完全可以通过主轴的方式实现,那么为什么还要有textDirectionverticalDirection这2个属性,官方API文档已经解释了这个问题:

his is also used to disambiguate `start` and `end` values (e.g. [MainAxisAlignment.start] or [CrossAxisAlignment.end]).

用于消除“start”和“end”值的歧义的。

主轴尺寸

主轴尺寸由mainAxisSize属性控制,仅有minmax两种方式,默认是max方法。min表示尽可能小,而max表示尽可能大,设置min的代码如下:


Row(
  mainAxisSize: MainAxisSize.min,
  ...
)

参考

线性布局(Row和Column)
Flutter 实战入门-老孟

上一篇下一篇

猜你喜欢

热点阅读