开发Flutter应用中使用到相关知识，当做笔记记之。
官网api
-
https://docs.flutter.io/flutter/widgets/Row-class.html
-
https://blog.csdn.net/huyongl1989/article/details/83745871
构造函数
1
2
3
4
5
6
7
8
9
10
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>[],
})
关键属性
-
key: 该属性代表当前widget的唯一标识符(类似于Android中的id)，在程序运行过程中，如果想调用该widget的某个方法，那就需要设置该属性值，该属性不是必须值
-
mainAxisAlignment: 子元素在主轴的对齐方式，Row的主轴即为水平方向,会对child位置起作用，默认是start；
1
2
3
4
5
6
7
8
9
10
11
12
13
center：将children放置在主轴的中心；
end：将children放置在主轴的末尾；
spaceAround：将主轴方向上的空白区域均分，使得children之间的空白区域相等，但是首位child的空白区域为1/2；
spaceBetween：将主轴方向上的空白区域均分，使得children之间的空白区域相等。首位child都靠近首位，没有间隙；
spaceEvenly：将主轴方向上的空白区域均分，使得children之间的空白区域相等，包括首位child；
start：将children放置在主轴的起点；
-
mainAxisSize: 主轴方向大小适配方式，只有两种取值方式： MainAxisSize.max 主轴方向大小(在Row中指宽度)与父容器大小相同(即Android中的match_parent) MainAxisSize.min 主轴方向大小(在Row中指宽度)由子元素决定(即Android中的wrap_content)
-
crossAxisAlignment: 子元素在交叉轴(垂直方向)的对齐方式
1
2
3
4
5
6
7
8
9
10
11
baseline：在交叉轴方向，使得children的baseline对齐；
center：children在交叉轴上居中展示；
end：children在交叉轴上末尾展示；
start：children在交叉轴上起点处展示；
stretch：让children填满交叉轴方向；
-
children: 子元素列表
-
TextDirection：兼容设置，一般不做处理；
-
VerticalDirection：定义children摆放顺序，默认是down（从top到bottom进行布局），up（从bottom到top进行布局）
-
TextBaseline：使用TextBaseline的方式；
案例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Widget label4Section() {
return new Row(
children: <Widget>[
new RaisedButton(
onPressed: () {
print('按钮一');
},
color: const Color(0xffcc0000),
child: new Text('按钮一'),
),
Expanded(
flex: 1,
child: new RaisedButton(
onPressed: () {
print('按钮二');
},
color: const Color(0xfff1c232),
child: new Text('按钮二'),
),
),
new RaisedButton(
onPressed: () {
print('按钮三');
},
color: const Color(0xffea9999),
child: new Text('按钮三'),
),
]
);
}
Flex构造函数
1
2
3
4
5
6
7
8
9
10
11
Flex({
Key key,
@required this.direction,
this.mainAxisAlignment = MainAxisAlignment.start,
this.mainAxisSize = MainAxisSize.max,
this.crossAxisAlignment = CrossAxisAlignment.center,
this.textDirection,
this.verticalDirection = VerticalDirection.down,
this.textBaseline,
List<Widget> children = const <Widget>[],
})
- 其中direction是控制水平还是垂直的，当为Axis.horizontal的时候，则是Row，当为Axis.vertical的时候，则是Column
