Flutter 基本控件
Widget
- StatelessWidget — 只能用来展示信息，不能有用户交互
- StatefulWidget — 可以通过改变状态使得 UI 发生变化
文本 Text
1
2
3
4
5
6
| class TestWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Text("text");
}
}
|
图片 Image
- 资源：Image.asset(name);
- 文件：Image.file(file);
- 内存：Image.memory(bytes);
- 网络：Image.network(src);
1
2
3
4
5
6
7
8
9
10
| class TestWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Image.network(
"http://www.zhangjiaxue.cn/images/avatar.jpg",
width: 150.0,
height: 150.0,
);
}
}
|
按钮（ FlatButton ，RaisedButton ）
- FlatButton
- RaisedButton
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| class TestWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
var flatBtn = FlatButton(
//按钮被点击的时候得到回调
onPressed: () => print('FlatButton pressed'),
//设置按钮的内容
child: Text('FlatButton BUTTON'),
);
var raisedButton = RaisedButton(
onPressed: () => print('RaisedButton pressed'),
child: Text('RaisedButton BUTTON'),
);
return raisedButton;
}
}
|
文本输入框 TextField
1
2
3
4
5
6
7
8
9
| class TestWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("输入")),
body: TextField(),
);
}
}
|
显示弹框 dialog
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
| class TestWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return RaisedButton(
child: Text("点击按钮弹出Dialog"),
onPressed: () {
showDialog(
// 第一个 context 是参数名，第二个 context 是 State 的成员变量
context: context,
builder: (_) {
return AlertDialog(
// dialog 的内容
content: Text("提示框"),
// actions 设置 dialog 的按钮
actions: <Widget>[
FlatButton(
child: Text('OK'),
// 用户点击按钮后，关闭弹框
onPressed: () => Navigator.pop(context),
)
],
);
});
});
}
}
|
布局
- Container（容器）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| class TestWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.all(8.0),
margin: EdgeInsets.all(4.0),
width: 200.0,
height: 200.0,
decoration: BoxDecoration(
// 背景色
color: Colors.grey,
// 圆角
borderRadius: BorderRadius.circular(5.0),
),
// 把文本放在 Container 的中间
child: Center(
child: Text('text'),
),
);
}
}
|
- Row(水平布局)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| class TestWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
//水平布局
return Row(
// 只有一个子元素的 widget，一般使用 child 参数来设置；Row 可以包含多个子控件，
// 对应的则是 children。
children: <Widget>[
Text('text1'),
Text('text2'),
Text('text3'),
Text('text4'),
],
);
}
}
|
- Column(竖直布局)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| class TestWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
//垂直布局
return Column(
children: <Widget>[
Text('text1'),
Text('text2'),
Text('text3'),
Text('text4'),
],
);
}
}
|
- Stack(层叠布局)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| class TestWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Stack(
// Aligment 的取值范围为 [-1, 1]，Stack 中心为 (0, 0)，
// 这里设置为 (-0.5, -0.5) 后，可以让文本对齐到 Container 的 1/4 处
alignment: const Alignment(-0.5, -0.5),
children: <Widget>[
Container(
width: 200,
height: 200,
color: Colors.blue,
),
Text("text2"),
],
);
}
}
|
布局控件
- Flexible
Flexible组件可以使Row、Column、Flex等子组件在主轴方向有填充可用空间的能力(例如，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
| class TestWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('水平方向布局'),
),
body: new Row(children: <Widget>[
new RaisedButton(
onPressed: () {
print('点击红色按钮事件');
},
color: Colors.red,
child: new Text('红色按钮'),
),
new Flexible(
flex: 1,
child: new RaisedButton(
onPressed: () {
print('点击黄色按钮事件');
},
color: Colors.yellow,
child: new Text('黄色按钮'),
),
),
new RaisedButton(
onPressed: () {
print('点击蓝色按钮事件');
},
color: Colors.blue,
child: new Text('蓝色按钮'),
),
]),
);
}
}
|
- Expanded
Expanded组件可以使Row、Column、Flex等子组件在其主轴方向上展开并填充可用空间(例如，Row在水平方向，Column在垂直方向)。如果多个子组件展开，可用空间会被其flex factor(表示扩展的速度、比例)分割。
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
| class TestWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('水平方向布局'),
),
body: new Row(children: <Widget>[
new RaisedButton(
onPressed: () {
print('点击红色按钮事件');
},
color: Colors.red,
child: new Text('红色按钮'),
),
new Expanded(
flex: 1,
child: new RaisedButton(
onPressed: () {
print('点击黄色按钮事件');
},
color: Colors.yellow,
child: new Text('黄色按钮'),
),
),
new RaisedButton(
onPressed: () {
print('点击蓝色按钮事件');
},
color: Colors.blue,
child: new Text('蓝色按钮'),
),
]),
);
}
}
|
非常感谢
Flutter学习指南：UI布局和控件（微信号：玉刚说 YugangTalk），作者：水晶虾饺
flutter控件Flexible和 Expanded的区别 ，作者：chunchun1230