线性布局 Column Row
Row
Row 布局组件类似于 Android 中的 LinearLayout 线性布局，它用来做水平横向布局使用，里面的 children 子元素按照水平方向进行排列。
https://api.flutter.dev/flutter/widgets/Row-class.html
- 定义
Row({
Key key,
// * 子元素集合
List<Widget> children = const <Widget>[],
// 主轴方向上的对齐方式（Row的主轴是横向轴）
MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
// 在主轴方向（Row的主轴是横向轴）占有空间的值，默认是max
MainAxisSize mainAxisSize = MainAxisSize.max,
// 在交叉轴方向(Row是纵向轴)的对齐方式，Row的高度等于子元素中最高的子元素高度
CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
// 水平方向子元素的排列方向：从左到右排列还是反向
TextDirection textDirection,
// 表示纵轴（垂直）的对齐排列方向，默认是VerticalDirection.down，表示从上到下。这个参数一般用于Column组件里
VerticalDirection verticalDirection = VerticalDirection.down,
// 字符对齐基线方式
TextBaseline textBaseline,
})
- MainAxisAlignment
主轴属性：主轴方向上的对齐方式，Row 是横向轴为主轴
enum MainAxisAlignment {
// 按照主轴起点对齐，例如：按照靠近最左侧子元素对齐
start,
// 将子元素放置在主轴的末尾，按照末尾对齐
end,
// 子元素放置在主轴中心对齐
center,
// 将主轴方向上的空白区域均分，使得子元素之间的空白区域相等，首尾子元素都靠近首尾，没有间隙。有点类似于两端对齐
spaceBetween,
// 将主轴方向上的空白区域均分，使得子元素之间的空白区域相等，但是首尾子元素的空白区域为1/2
spaceAround,
// 将主轴方向上的空白区域均分，使得子元素之间的空白区域相等，包括首尾子元素
spaceEvenly,
}
- CrossAxisAlignment
交叉属性：在交叉轴方向的对齐方式，Row 是纵向轴。Row 的高度等于子元素中最高的子元素高度
enum CrossAxisAlignment {
// 子元素在交叉轴上起点处展示
start,
// 子元素在交叉轴上末尾处展示
end,
// 子元素在交叉轴上居中展示
center,
// 让子元素填满交叉轴方向
stretch,
// 在交叉轴方向，使得子元素按照baseline对齐
baseline,
}
- MainAxisSize
在主轴方向子元素占有空间的方式，Row 的主轴是横向轴。默认是 max
enum MainAxisSize {
// 根据传入的布局约束条件，最大化主轴方向占用可用空间，也就是尽可能充满可用宽度
max,
// 与max相反，是最小化占用主轴方向的可用空间
min,
}
Column
Column 是纵向排列子元素
参数用法同上
https://api.flutter.dev/flutter/widgets/Column-class.html
例子
代码
Widget build(BuildContext context) {
return Scaffold(
body: Container(
color: Colors.amber,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
// mainAxisSize: MainAxisSize.min,
children: const [
FlutterLogo(
size: 24,
),
FlutterLogo(
size: 48,
),
FlutterLogo(
size: 128,
),
FlutterLogo(
size: 200,
),
],
),
),
);
}
输出
线性布局 Column Row
Row
Row 布局组件类似于 Android 中的 LinearLayout 线性布局，它用来做水平横向布局使用，里面的 children 子元素按照水平方向进行排列。
https://api.flutter.dev/flutter/widgets/Row-class.html
- 定义
Row({
Key key,
// * 子元素集合
List<Widget> children = const <Widget>[],
// 主轴方向上的对齐方式（Row的主轴是横向轴）
MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
// 在主轴方向（Row的主轴是横向轴）占有空间的值，默认是max
MainAxisSize mainAxisSize = MainAxisSize.max,
// 在交叉轴方向(Row是纵向轴)的对齐方式，Row的高度等于子元素中最高的子元素高度
CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
// 水平方向子元素的排列方向：从左到右排列还是反向
TextDirection textDirection,
// 表示纵轴（垂直）的对齐排列方向，默认是VerticalDirection.down，表示从上到下。这个参数一般用于Column组件里
VerticalDirection verticalDirection = VerticalDirection.down,
// 字符对齐基线方式
TextBaseline textBaseline,
})
- MainAxisAlignment
主轴属性：主轴方向上的对齐方式，Row 是横向轴为主轴
enum MainAxisAlignment {
// 按照主轴起点对齐，例如：按照靠近最左侧子元素对齐
start,
// 将子元素放置在主轴的末尾，按照末尾对齐
end,
// 子元素放置在主轴中心对齐
center,
// 将主轴方向上的空白区域均分，使得子元素之间的空白区域相等，首尾子元素都靠近首尾，没有间隙。有点类似于两端对齐
spaceBetween,
// 将主轴方向上的空白区域均分，使得子元素之间的空白区域相等，但是首尾子元素的空白区域为1/2
spaceAround,
// 将主轴方向上的空白区域均分，使得子元素之间的空白区域相等，包括首尾子元素
spaceEvenly,
}
- CrossAxisAlignment
交叉属性：在交叉轴方向的对齐方式，Row 是纵向轴。Row 的高度等于子元素中最高的子元素高度
enum CrossAxisAlignment {
// 子元素在交叉轴上起点处展示
start,
// 子元素在交叉轴上末尾处展示
end,
// 子元素在交叉轴上居中展示
center,
// 让子元素填满交叉轴方向
stretch,
// 在交叉轴方向，使得子元素按照baseline对齐
baseline,
}
- MainAxisSize
在主轴方向子元素占有空间的方式，Row 的主轴是横向轴。默认是 max
enum MainAxisSize {
// 根据传入的布局约束条件，最大化主轴方向占用可用空间，也就是尽可能充满可用宽度
max,
// 与max相反，是最小化占用主轴方向的可用空间
min,
}
Column
Column 是纵向排列子元素
参数用法同上
https://api.flutter.dev/flutter/widgets/Column-class.html
例子
代码
Widget build(BuildContext context) {
return Scaffold(
body: Container(
color: Colors.amber,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
// mainAxisSize: MainAxisSize.min,
children: const [
FlutterLogo(
size: 24,
),
FlutterLogo(
size: 48,
),
FlutterLogo(
size: 128,
),
FlutterLogo(
size: 200,
),
],
),
),
);
}
输出