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<Widget> children = const <Widget>[],
})
关键属性
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<Widget> children = const <Widget>[],
})
关键属性
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: 子元素列表