Flutter入门之Row、Column、Container布局

在Flutter中线性布局结构的实现是通过两个不同的widget分别来实现横向和纵向布局结构的。组件Row用来实现横向的线性布局，而组件Column则用来实现纵向的线性布局，而Container则是用来设置背景、设置大小、设置边距(padding)的布局。

下面来分别介绍三个组件的相关属性：

Container

Container的构造函数如下：

Container({

    Key key,

    this.alignment,

    this.padding,

    Color color,

    Decoration decoration,

    this.foregroundDecoration,

    double width,

    double height,

    BoxConstraints constraints,

    this.margin,

    this.transform,

    this.child,

  })

属性

key: 该属性代表当前widget的唯一标识符(类似于Android中的id)，在程序运行过程中，如果想调用该widget的某个方法，那就需要设置该属性值，该属性不是必须值

alignment: 子元素的对齐方式，官方已经提供了几种常用的对齐方式

padding: 这个比较好理解，跟Android中的是一个意思，内边距

color: 设置组件的背景色

decoration: 与color属性功能一样，都是设置背景，不过decoration功能更强大，它可以设置背景图片、圆角、渐变、阴影、边框等

width & height: 组件的宽高

constraints: 组件的宽高限制

margin: 外边距

transform: 矩阵转换

child: 子元素

另外在使用过程中，Container如果作为应用的根节点的话，它的宽高会自动填充为屏幕大小。

Row

Row的构造函数如下：

Row({

    Key key,

    MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,

    MainAxisSize mainAxisSize = MainAxisSize.max,

    CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,

    TextDirection textDirection,

    VerticalDirection verticalDirection = VerticalDirection.down,

    TextBaseline textBaseline,

    List children = const [],

  })

关键属性

1.key: 该属性代表当前widget的唯一标识符(类似于Android中的id)，在程序运行过程中，如果想调用该widget的某个方法，那就需要设置该属性值，该属性不是必须值

2.mainAxisAlignment: 子元素在主轴的对齐方式，Row的主轴即为水平方向

3.mainAxisSize: 主轴方向大小适配方式，只有两种取值方式：

              1.MainAxisSize.max 主轴方向大小(在Row中指宽度)与父容器大小相同(即Android中的match_parent)

               2.MainAxisSize.min 主轴方向大小(在Row中指宽度)由子元素决定(即Android中的wrap_content)

4.crossAxisAlignment: 子元素在交叉轴(垂直方向)的对齐方式

5.children: 子元素列表

Column

Column的构造函数

Column({

    Key key,

    MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,

    MainAxisSize mainAxisSize = MainAxisSize.max,

    CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,

    TextDirection textDirection,

    VerticalDirection verticalDirection = VerticalDirection.down,

    TextBaseline textBaseline,

    List children = const [],

  })

关键属性

key: 该属性代表当前widget的唯一标识符(类似于Android中的id)，在程序运行过程中，如果想调用该widget的某个方法，那就需要设置该属性值，该属性不是必须值

1.mainAxisAlignment: 子元素在主轴的对齐方式，Column的主轴即为垂直方向

2.mainAxisSize: 主轴方向大小适配方式，只有两种取值方式：

             1.MainAxisSize.max 主轴方向大小(在Column中指高度)与父容器大小相同(即Android中的match_parent)

             2.MainAxisSize.min 主轴方向大小(在Column中指高度)由子元素决定(即Android中的wrap_content)

3.crossAxisAlignment: 子元素在交叉轴(水平方向)的对齐方式

4.children: 子元素列表