第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方法(唯一必须实现的方法)Widget build(BuildContext context) {return Container();}
}// StatefulWidget生命周期
class MyStatefulWidget extends StatefulWidget { _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}class _MyStatefulWidgetState extends State<MyStatefulWidget> {void initState() {super.initState();// 初始化状态}void didChangeDependencies() {super.didChangeDependencies();// 依赖变化时调用}Widget build(BuildContext context) {return Container();}void dispose() {// 清理资源super.dispose();}
}
3.2 基础显示组件
3.2.1 Text组件
import 'package:flutter/material.dart';class TextExample extends StatelessWidget {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 {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 {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