flutter row column expanded组件使用

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153

import 'package:flutter/material.dart';

/*
* row column expanded组件使用
*/
void main() {
runApp(MyApp());
}

//自定组件就是类
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("row column expanded组件使用"),
),
body: HomeContent3(),
),
theme: ThemeData(primarySwatch: Colors.red),
);
}
}

//Column组件使用
class HomeContent extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
width: double.infinity,
height: double.infinity,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly, //分割类型
crossAxisAlignment: CrossAxisAlignment.center, //交叉轴,相对于外部容器的位置
children: [
IconContainer(
Icons.category,
bgColor: Colors.red,
iconColor: Colors.white,
),
IconContainer(
Icons.category,
bgColor: Colors.yellow,
iconColor: Colors.white,
),
IconContainer(
Icons.category,
bgColor: Colors.blue,
iconColor: Colors.white,
)
],
),
);
}
}

//Row组件使用
class HomeContent2 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
width: double.infinity,
height: double.infinity,
color: Colors.black38,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly, //分割类型
crossAxisAlignment: CrossAxisAlignment.center, //交叉轴,相对于外部容器的位置
children: [
IconContainer(
Icons.category,
bgColor: Colors.red,
iconColor: Colors.white,
),
IconContainer(
Icons.category,
bgColor: Colors.yellow,
iconColor: Colors.white,
),
IconContainer(
Icons.category,
bgColor: Colors.blue,
iconColor: Colors.white,
)
],
),
);
}
}

//Expanded组件使用
class HomeContent3 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
width: double.infinity,
height: double.infinity,
color: Colors.black38,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly, //分割类型
crossAxisAlignment: CrossAxisAlignment.center, //交叉轴,相对于外部容器的位置
children: [
Expanded(
child: IconContainer(
Icons.category,
bgColor: Colors.red,
iconColor: Colors.white,
),
flex: 1),
SizedBox(
width: 10.0,
),
Expanded(
child: IconContainer(
Icons.category,
bgColor: Colors.yellow,
iconColor: Colors.white,
),
flex: 1),
SizedBox(
width: 10.0,
),
Expanded(
child: IconContainer(
Icons.category,
bgColor: Colors.blue,
iconColor: Colors.white,
),
flex: 2),
],
),
);
}
}

//自定义图片组件
// ignore: must_be_immutable
class IconContainer extends StatelessWidget {
IconData iconData;
Color bgColor = Colors.blue;
Color iconColor = Colors.yellow;

IconContainer(this.iconData, {this.bgColor, this.iconColor});

@override
Widget build(BuildContext context) {
return Container(
width: 100.0,
height: 100.0,
color: this.bgColor,
child: Icon(this.iconData, color: this.iconColor));
}
}