完整教程：第3课：Flutter基础组件

第3课：Flutter基础组件

学习目标

• 理解Flutter Widget的概念和分类
• 掌握常用基础组件的使用方法
• 学会基础布局组件的组合使用
• 理解Widget的生命周期和状态管理
• 能够创建简单的用户界面

课程内容

3.1 Widget基础概念

3.1.1 什么是Widget

在Flutter中，“一切皆Widget”：

• Widget：Flutter应用的基本构建块
• 声明式UI：通过描述UI的最终状态来构建界面
• 不可变性：Widget是不可变的，一旦创建就不能修改
• 组合性：通过组合简单的Widget来创建复杂的UI

3.1.2 Widget分类

Widget
├── StatelessWidget（无状态组件）
│   ├── Text
│   ├── Icon
│   ├── Image
│   └── ...
└── StatefulWidget（有状态组件）
├── TextField
├── Checkbox
├── Slider
└── ...

3.1.3 Widget生命周期

// StatelessWidget生命周期
class MyWidget
extends StatelessWidget {

// 构造函数
MyWidget({
Key? key
}) : super(key: key);
// build方法（唯一必须实现的方法）
@override
Widget build(BuildContext context) {

return Container();
}
}
// StatefulWidget生命周期
class MyStatefulWidget
extends StatefulWidget {

@override
_MyStatefulWidgetState createState() =>
_MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends
State<
MyStatefulWidget> {

@override
void initState() {

super.initState();
// 初始化状态
}
@override
void didChangeDependencies() {

super.didChangeDependencies();
// 依赖变化时调用
}
@override
Widget build(BuildContext context) {

return Container();
}
@override
void dispose() {

// 清理资源
super.dispose();
}
}

3.2 基础显示组件

3.2.1 Text组件

import 'package:flutter/material.dart';
class TextExample
extends StatelessWidget {

@override
Widget build(BuildContext context) {

return Scaffold(
appBar: AppBar(title: Text('Text组件示例')),
body: Padding(
padding: EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// 基本文本
Text('这是基本文本'),
SizedBox(height: 20),
// 带样式的文本
Text(
'这是带样式的文本',
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
color: Colors.blue,
letterSpacing: 2.0,
),
),
SizedBox(height: 20),
// 富文本
RichText(
text: TextSpan(
text: '这是',
style: TextStyle(
fontSize: 18,
color: Colors.black,
),
children: [
TextSpan(
text: '富文本',
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
color: Colors.red,
),
),
TextSpan(
text: '示例',
style: TextStyle(
fontSize: 18,
color: Colors.black,
),
),
],
),
),
SizedBox(height: 20),
// 文本对齐
Text(
'这是居中对齐的文本，可以显示多行内容，'
'适合用于显示较长的文本信息。',
textAlign: TextAlign.center,
style: TextStyle(fontSize: 16),
),
SizedBox(height: 20),
// 文本溢出处理
Text(
'这是一段很长的文本，可能会超出容器的宽度，'
'需要处理文本溢出的情况。',
overflow: TextOverflow.ellipsis,
maxLines: 2,
style: TextStyle(fontSize: 16),
),
SizedBox(height: 20),
// 选择文本
SelectableText(
'这是可以选择和复制的文本，长按可以选择文本内容。',
style: TextStyle(fontSize: 16),
),
],
),
),
);
}
}

3.2.2 Icon组件

class IconExample
extends StatelessWidget {

@override
Widget build(BuildContext context) {

return Scaffold(
appBar: AppBar(title: Text('Icon组件示例')),
body: Padding(
padding: EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// 基本图标
Icon(Icons.star),
SizedBox(height: 20),
// 带样式的图标
Icon(
Icons.favorite,
color: Colors.red,
size: 48,
),
SizedBox(height: 20),
// 图标行
Row(
children: [
Icon(Icons.home, color: Colors.blue),
SizedBox(width: 16),
Icon(Icons.search, color: Colors.green),
SizedBox(width: 16),
Icon(Icons.person, color: Colors.orange),
SizedBox(width: 16),
Icon(Icons.settings, color: Colors.purple),
],
),
SizedBox(height: 20),
// 图标按钮
Row(
children: [
IconButton(
icon: Icon(Icons.thumb_up),
onPressed: () =>
print('点赞'),
color: Colors.blue,
),
IconButton(
icon: Icon(Icons.thumb_down),
onPressed: () =>
print('点踩'),
color: Colors.red,
),
IconButton(
icon: Icon(Icons.share),
onPressed: () =>
print('分享'),
color: Colors.green,
),
],
),
SizedBox(height: 20),
// 自定义图标
Container(
width: 50,
height: 50,
decoration: BoxDecoration(
color: Colors.amber,
shape: BoxShape.circle,
),
child: Icon(
Icons.lightbulb,
color: Colors.white,
size: 30,
),
),
],
),
),
);
}
}

3.2.3 Image组件

class ImageExample
extends StatelessWidget {

@override
Widget build(BuildContext context) {

return Scaffold(
appBar: AppBar(title: Text('Image组件示例')),
body: Padding(
padding: EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// 网络图片
Image.network(
'https://picsum.photos/200/200',
width: 200,
height: 200,
fit: BoxFit.cover,
loadingBuilder: (context, child, loadingProgress