Appearance
Flutter 基础组件
什么是 Widget
在 Flutter 中，一切都是 Widget。Widget 是构建 UI 的基本单位，它可以是一个按钮、一个文本、一个容器，甚至是整个应用。
Flutter 的 Widget 分为两种类型：
- StatelessWidget：无状态组件，不可变，一旦创建就不能改变
- StatefulWidget：有状态组件，可以在运行时改变状态
常用基础组件
1. 文本组件
Text
用于显示文本内容。
dart
Text(
'Hello Flutter',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.blue,
),
textAlign: TextAlign.center,
maxLines: 2,
overflow: TextOverflow.ellipsis,
)1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
2. 容器组件
Container
一个通用的容器组件，可以设置宽高、边距、填充、边框等。
dart
Container(
width: 200,
height: 200,
margin: EdgeInsets.all(20),
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(10),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 5,
blurRadius: 7,
offset: Offset(0, 3),
),
],
),
child: Text('Container Example'),
)1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
3. 布局组件
Row
水平排列子组件。
dart
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text('Item 1'),
Text('Item 2'),
Text('Item 3'),
],
)1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
Column
垂直排列子组件。
dart
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Item 1'),
Text('Item 2'),
Text('Item 3'),
],
)1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
Stack
层叠排列子组件。
dart
Stack(
alignment: Alignment.center,
children: [
Container(width: 200, height: 200, color: Colors.blue),
Container(width: 150, height: 150, color: Colors.red),
Container(width: 100, height: 100, color: Colors.yellow),
],
)1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
4. 交互组件
RaisedButton / ElevatedButton
一个凸起的按钮。
dart
ElevatedButton(
onPressed: () {
print('Button pressed');
},
child: Text('Click Me'),
style: ElevatedButton.styleFrom(
primary: Colors.blue,
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
textStyle: TextStyle(fontSize: 16),
),
)1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
TextField
文本输入框。
dart
TextField(
decoration: InputDecoration(
labelText: 'Enter your name',
border: OutlineInputBorder(),
hintText: 'Name',
),
onChanged: (value) {
print('Value: $value');
},
controller: TextEditingController(),
)1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
Checkbox
复选框。
dart
Checkbox(
value: isChecked,
onChanged: (value) {
setState(() {
isChecked = value!;
});
},
)1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
Radio
单选按钮。
dart
Radio(
value: 'option1',
groupValue: selectedOption,
onChanged: (value) {
setState(() {
selectedOption = value!;
});
},
)1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
5. 滚动组件
ListView
列表组件，支持滚动。
dart
ListView(
children: [
ListTile(
leading: Icon(Icons.person),
title: Text('John Doe'),
subtitle: Text('johndoe@example.com'),
trailing: Icon(Icons.arrow_forward),
),
// 更多列表项...
],
)
// 或使用构建器创建长列表
ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(items[index]),
);
},
)1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
GridView
网格布局组件。
dart
GridView.count(
crossAxisCount: 2,
children: [
Container(color: Colors.red),
Container(color: Colors.blue),
Container(color: Colors.green),
Container(color: Colors.yellow),
],
)1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
6. 其他常用组件
Image
显示图片。
dart
// 从网络加载图片
Image.network('https://example.com/image.jpg'),
// 从本地加载图片
Image.asset('assets/images/image.png'),
// 从文件加载图片
Image.file(File('path/to/image.jpg')),1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
Icon
显示图标。
dart
Icon(
Icons.home,
size: 30,
color: Colors.blue,
)1
2
3
4
5
2
3
4
5
Card
卡片组件。
dart
Card(
elevation: 5,
child: Padding(
padding: EdgeInsets.all(10),
child: Column(
children: [
Text('Card Title'),
Text('Card Content'),
],
),
),
)1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
组合组件
Flutter 的强大之处在于可以通过组合简单组件来创建复杂的 UI。例如：
dart
Card(
child: Column(
children: [
Image.network('https://example.com/image.jpg'),
Padding(
padding: EdgeInsets.all(10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Title', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
SizedBox(height: 5),
Text('Description', style: TextStyle(color: Colors.grey)),
SizedBox(height: 10),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
ElevatedButton(
onPressed: () {},
child: Text('Action'),
),
],
),
],
),
),
],
),
)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
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
布局技巧
使用 SizedBox 控制间距
dartSizedBox(height: 10), // 垂直间距 SizedBox(width: 10), // 水平间距1
2使用 Expanded 填充剩余空间
dartRow( children: [ Expanded(child: Text('Left')), Text('Right'), ], )1
2
3
4
5
6使用 Flexible 控制子组件大小
dartRow( children: [ Flexible(flex: 2, child: Text('2 parts')), Flexible(flex: 1, child: Text('1 part')), ], )1
2
3
4
5
6使用 AspectRatio 保持宽高比
dartAspectRatio( aspectRatio: 16 / 9, child: Container(color: Colors.blue), )1
2
3
4
总结
Flutter 提供了丰富的基础组件，通过组合这些组件可以创建各种复杂的 UI。了解这些基础组件及其用法是 Flutter 开发的基础。在实际开发中，你会发现 Flutter 的组件系统非常灵活，可以满足各种 UI 需求。