11.Flutter和Android对应
11.Flutter和Android对应
Flutter 中的布局和 Android 中的布局对应
Column 默认大小
Column 的 widget 和 height 默认是充满父布局
- MainAxisSize.min, //wrap_content ,不加的话默认为 match_parent（MainAxisSize.max）
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
Widget columnWidget2() {
return Container(
color: Colors.orange,
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: 100,
height: 100,
color: Colors.green,
child: const Text("Column固定尺寸测试2"),
),
Container(
width: double.infinity,
color: Colors.blue,
child: const Text("Column wrap content 111 测试"),
),
Visibility(
visible: true,
child: Container(
color: Colors.greenAccent,
child: const Text("Column wrap content 222 测试"),
),
)
],
),
);
}
Flutter Row/Column wrap_content
- Row wrap_content
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
Widget rowWidget() {
return Row(
children: [
Container(
width: 80,
height: 80,
color: Colors.green,
child: const Text("Row 固定尺寸测试"),
),
Container(
color: Colors.blue,
child: const Text("Row wrap content 测试"),
),
Visibility(
visible: true,
child: Container(
color: Colors.greenAccent,
child: const Text("Row wrap content 测试"),
),
)
],
);
}
- Column wrap_content
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
Widget columnWidget() {
return Column(
children: [
Container(
width: 100,
height: 100,
color: Colors.green,
child: const Text("Column固定尺寸测试"),
),
Container(
color: Colors.blue,
child: const Text("Column wrap content 111 测试"),
),
Visibility(
visible: true,
child: Container(
color: Colors.greenAccent,
child: const Text("Column wrap content 222 测试"),
),
)
],
);
}
Flutter Column match_parent
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
Widget columnWidget2() {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: 100,
height: 100,
color: Colors.green,
child: const Text("Column固定尺寸测试2"),
),
Container(
width: double.infinity,
color: Colors.blue,
child: const Text("Column wrap content 111 测试"),
),
Visibility(
visible: true,
child: Container(
color: Colors.greenAccent,
child: const Text("Column wrap content 222 测试"),
),
)
],
);
}
layout_weight
- MainAxisAlignment.spaceEvenly
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
Widget columnLayoutWeight() {
return Container(
color: Colors.yellowAccent,
child: Row(
//Column
// mainAxisSize: MainAxisSize.min,//wrap_content ,不加的话默认为match_parent（MainAxisSize.max）
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
//start==left,center==center,end==right ,
// spaceEvenly==等比例居中，4个间距一样大（weight=1),spaceAround=等比例居中，6个间距一样大,spaceBetween=中间居中，两边顶边
children: [
Expanded(
flex: 2,
child: Container(
color: Colors.red,
child: const Icon(
Icons.access_time,
size: 50.0,
),
), //flex == android:layout_weight
),
Expanded(
flex: 4,
child: Container(
color: Colors.blue,
child: const Icon(
Icons.pie_chart,
size: 100.0,
),
),
),
Expanded(
flex: 6,
child: Container(
color: Colors.green,
child: const Icon(
Icons.email,
size: 50.0,
),
),
),
],
),
);
}
本文由作者按照 CC BY 4.0 进行授权