Flutter + FastAPI 30天速成计划自用并实践-第10天-组件化开发实践
Day 10 详细学习计划：组件化开发实践
内容有点多，有点吃不消，看了好多视频和文章才开始做这样天的内容,做出来是这个效果
学习目标
- 理解 StatelessWidget 和 StatefulWidget
- 学习组件化开发思想
- 创建可复用的文章卡片组件
- 实现组件间通信
知识点详解
1. StatelessWidget vs StatefulWidget
StatelessWidget：
- 不可变的 Widget
- 一旦创建就不能改变
- 适用于静态内容
StatefulWidget：
- 可变的 Widget
- 有状态管理能力
- 适用于交互式内容
2. 组件化开发思想
核心理念：
- 单一职责原则：每个组件只负责一项功能
- 可复用性：组件可以在多处使用
- 可组合性：通过组合小组件构建复杂界面
优势：
- 提高开发效率
- 便于维护和调试
- 促进团队协作
3. 组件生命周期
StatelessWidget 生命周期：
- 构造函数调用
- build 方法执行
StatefulWidget 生命周期：
- createState 方法
- initState 方法（初始化状态）
- build 方法（构建界面）
- setState 方法（更新状态）
- dispose 方法（销毁资源）
练习代码
1. 文章卡片组件 ArticleCard
创建 components/article_card.dart
import'package:flutter/material.dart';classArticleCardextendsStatelessWidget{finalString title;finalString summary;finalString?author;finalbool isPublished;finalVoidCallback onTap;constArticleCard({Key?key,requiredthis.title,requiredthis.summary,this.author,this.isPublished=false,requiredthis.onTap,}):super(key:key);@overrideWidgetbuild(BuildContext context){returnCard(elevation:4,margin:constEdgeInsets.all(8),child:InkWell(onTap:onTap,child:Padding(padding:constEdgeInsets.all(16),child:Column(crossAxisAlignment:CrossAxisAlignment.start,children:[Row(children:[Expanded(child:Text(title,style:constTextStyle(fontSize:18,fontWeight:FontWeight.bold,),),),if(!isPublished)constChip(label:Text('草稿'),backgroundColor:Colors.orange,),],),constSizedBox(height:8),Text(summary,style:constTextStyle(fontSize:14,color:Colors.grey,),maxLines:3,overflow:TextOverflow.ellipsis,),constSizedBox(height:8),if(author!=null)Text('作者: $author',style:constTextStyle(fontSize:12,color:Colors.blue,),),],),),),);}}2. 可展开的文章卡片 ExpandableArticleCard
创建 components/expandable_article_card.dart
import'package:flutter/material.dart';classExpandableArticleCardextendsStatefulWidget{finalString title;finalString content;finalString?author;constExpandableArticleCard({Key?key,requiredthis.title,requiredthis.content,this.author,}):super(key:key);@overrideState<ExpandableArticleCard>createState()=>_ExpandableArticleCardState();}class_ExpandableArticleCardStateextendsState<ExpandableArticleCard>{bool _isExpanded=false;@overrideWidgetbuild(BuildContext context){returnCard(elevation:4,margin:constEdgeInsets.all(8),child:Column(crossAxisAlignment:CrossAxisAlignment.start,children:[ListTile(title:Text(widget.title,style:constTextStyle(fontWeight:FontWeight.bold),),subtitle:widget.author!=null?Text('作者: ${widget.author}'):null,trailing:IconButton(icon:Icon(_isExpanded?Icons.expand_less:Icons.expand_more,),onPressed:(){setState((){_isExpanded=!_isExpanded;});},),),if(_isExpanded)Padding(padding:constEdgeInsets.symmetric(horizontal:16,vertical:8),child:Text(widget.content),),],),);}}3. 使用自定义组件
更新 lib/main.dart
import'package:flutter/material.dart';import'components/article_card.dart';import'components/expandable_article_card.dart';voidmain(){runApp(constMyApp());}classMyAppextendsStatelessWidget{constMyApp({Key?key}):super(key:key);@overrideWidgetbuild(BuildContext context){returnMaterialApp(title:'Tutorial Site',theme:ThemeData(primarySwatch:Colors.blue,),home:constTutorialHomePage(),);}}classTutorialHomePageextendsStatelessWidget{constTutorialHomePage({Key?key}):super(key:key);@overrideWidgetbuild(BuildContext context){// 模拟文章数据finalarticles=[{'title':'Day 1: 环境搭建','summary':'学习如何安装 Python、FastAPI 和配置开发环境','author':'教程作者','published':true,},{'title':'Day 2: 数据模型','summary':'学习 Pydantic 和数据验证','author':'教程作者','published':true,},{'title':'Day 3: 数据库集成','summary':'学习 SQLite 和 SQLModel 的使用','author':'教程作者','published':false,},];returnScaffold(appBar:AppBar(title:constText('Flutter + FastAPI 教程网站'),),body:Row(children:[// 左侧导航栏Expanded(flex:1,child:Container(color:Colors.grey[300],child:ListView(children:[ListTile(leading:constIcon(Icons.book),title:constText('环境搭建'),onTap:(){// TODO: 导航到环境搭建教程},),ListTile(leading:constIcon(Icons.data_object),title:constText('数据模型'),onTap:(){// TODO: 导航到数据模型教程},),ListTile(leading:constIcon(Icons.storage),title:constText('数据库集成'),onTap:(){// TODO: 导航到数据库集成教程},),ListTile(leading:constIcon(Icons.api),title:constText('CRUD 操作'),onTap:(){// TODO: 导航到 CRUD 操作教程},),],),),),// 右侧内容区域Expanded(flex:3,child:Container(padding:constEdgeInsets.all(16.0),child:Column(crossAxisAlignment:CrossAxisAlignment.start,children:[constText('最新教程',style:TextStyle(fontSize:24,fontWeight:FontWeight.bold,),),constSizedBox(height:16),Expanded(child:ListView.builder(itemCount:articles.length,itemBuilder:(context,index){finalarticle=articles[index];returnArticleCard(title:article['title']!,summary:article['summary']!,author:article['author'],isPublished:article['published']asbool,onTap:(){// 点击文章卡片的处理ScaffoldMessenger.of(context).showSnackBar(SnackBar(content:Text('打开文章: ${article['title']}'),),);},);},),),constSizedBox(height:32),constText('可展开卡片示例',style:TextStyle(fontSize:20,fontWeight:FontWeight.bold,),),constSizedBox(height:16),constExpandableArticleCard(title:'什么是 Flutter?',content:'Flutter 是 Google 开源的 UI 工具包，用于从单一代码库为移动、Web 和桌面构建美观的原生编译应用程序。',author:'Google',),constSizedBox(height:16),constExpandableArticleCard(title:'什么是 FastAPI?',content:'FastAPI 是一个现代、快速（高性能）的 Python Web 框架，用于构建 API，基于标准的 Python 类型提示。',author:'Sebastián Ramírez',),],),),),],),);}}4. 创建组件目录结构
lib/ ├── main.dart ├── components/ │ ├── article_card.dart │ └── expandable_article_card.dart