Flutter从入门到实战-02-Flutter框架核心

Flutter 从入门到实战二Flutter 框架核心本文根据讲义目标是把“会搭环境、会写页面、会管理状态与路由、会做基础网络请求”串成一条完整上手路径。一、先把开发环境一次搭对这部分讲义强调的核心思想是环境问题越早解决后面越省时间。1. Flutter SDK 与环境变量无论是 Windows 还是 macOS最关键的都是两件事正确下载并解压 Flutter SDK建议放英文路径把 SDK 的bin目录加入环境变量常用检查命令flutter--versionflutter doctor-vflutter doctor -v是整个 Flutter 学习阶段最重要的“体检命令”插件、平台工具链、许可证问题基本都能在这里暴露。2. 创建项目先从 Web 跑通讲义建议先创建 web 平台项目再逐步补全多端这个策略对新手很友好。flutter create--platformsweb my_appcdmy_app flutter run-dchrome先跑通一个页面后续再扩展 Android、iOS、HarmonyOS会比一开始全平台并行配置更稳。二、理解项目结构与启动入口Flutter 工程目录里最关键的是以下几个位置lib/业务代码主目录pubspec.yaml依赖与资源配置web/、android/、ios/各平台壳工程build/构建产物启动入口是lib/main.dart。讲义重点强调了两个概念runApp()应用启动函数WidgetFlutter 的基本构建单元万物皆 Widget示例voidmain(){runApp(constMyApp());}三、先搭“应用骨架”MaterialApp ScaffoldFlutter 页面开发中最常见的一层结构是MaterialApp应用级配置主题、路由、首页Scaffold页面骨架头部、主体、底部导航等典型代码classMyAppextendsStatelessWidget{constMyApp({super.key});overrideWidgetbuild(BuildContextcontext){returnMaterialApp(title:Flutter Demo,home:Scaffold(appBar:AppBar(title:constText(首页)),body:constCenter(child:Text(Hello Flutter)),),);}}可以把它理解成MaterialApp负责“全局规则”Scaffold负责“单页布局”四、核心认知无状态组件 vs 有状态组件讲义把组件分成两类这个分类会贯穿整个 Flutter 开发。1. StatelessWidget无状态适合纯展示内容不维护内部可变数据。classWelcomeextendsStatelessWidget{constWelcome({super.key});overrideWidgetbuild(BuildContextcontext){returnconstText(Welcome);}}2. StatefulWidget有状态适合有交互、有数据变化的场景核心是setState触发重建。classCounterPageextendsStatefulWidget{constCounterPage({super.key});overrideStateCounterPagecreateState()_CounterPageState();}class_CounterPageStateextendsStateCounterPage{int count0;overrideWidgetbuild(BuildContextcontext){returnColumn(children:[Text(count:$count),ElevatedButton(onPressed:()setState(()count),child:constText(1),),],);}}五、生命周期什么时候做初始化、更新、销毁讲义对生命周期给了清晰主线创建阶段createState - initState - didChangeDependencies - build更新阶段didUpdateWidget - build销毁阶段deactivate - dispose实战建议一次性初始化放initState依赖InheritedWidget的数据变化放didChangeDependencies控制器、监听器释放放dispose六、事件与状态更新交互的基本闭环点击类交互常用GestureDetectorInkWell按钮组件ElevatedButton、TextButton等核心原则只有一句数据变化后要通过setState触发 UI 更新。七、布局组件90% 页面都离不开这几类1. 基础容器Container尺寸、边距、背景、边框、变换的组合容器Center居中布局Align精确对齐Padding内边距2. 线性布局Column垂直排列Row水平排列FlexExpanded/Flexible按比例分配空间3. 流式与层叠Wrap空间不足自动换行StackPositionedZ 轴叠放与绝对定位实战里常见搭配表单页Column Padding图文列表项Row ExpandedBanner 搜索条Stack Positioned八、常用基础组件Text、Image、TextField1. 文本 Text除了基础展示还要注意maxLinesoverflowTextStyleText.rich TextSpan混合样式2. 图片 Image常用来源Image.asset本地资源Image.network网络图片本地图片务必在pubspec.yaml中声明资源路径。3. 输入框 TextField高频组合TextEditingController管理输入内容onChanged监听变化InputDecoration配置占位、边框、前后缀九、滚动体系从简单到复杂1. SingleChildScrollView适合内容量不大、单子树滚动场景。2. ListView核心结论短列表可用默认构造长列表优先ListView.builder需要分割线用ListView.separated3. GridView常用模式GridView.count按列数布局GridView.extent按最大子项宽度布局GridView.builder动态长网格4. CustomScrollView Sliver当页面结构包含“轮播 吸顶 列表 网格”等复杂组合时Sliver是最稳定方案。常见映射关系SliverList对应列表SliverGrid对应网格SliverPersistentHeader对应吸顶头部SliverToBoxAdapter用于接普通 Widget5. PageView用于整页切换场景配合PageController完成jumpToPageanimateToPage十、组件通信先掌握这两条主链路讲义给出的通信方式很实用建议按这条顺序掌握父传子构造函数参数子传父回调函数示例子传父思想classChildextendsStatelessWidget{finalvoidFunction(Stringvalue)onSelect;constChild({super.key,requiredthis.onSelect});overrideWidgetbuild(BuildContextcontext){returnElevatedButton(onPressed:()onSelect(done),child:constText(回传),);}}十一、网络请求Dio 的工程化用法讲义不是只讲Dio().get()而是讲了“怎么封装”统一 baseUrl 与超时请求/响应/错误拦截器统一请求方法含业务状态码处理API 分层按业务模块封装页面初始化拉取并渲染推荐结构utils/dio_request.dartapi/home_api.dartmodels/*.dartWeb 端还会遇到跨域讲义也强调了这类问题要提前在开发环境处理。十二、路由管理从基础到命名再到动态1. 基础路由适合页面少、跳转简单Navigator.push(context,MaterialPageRoute(builder:(_)constDetailPage()),);2. 命名路由适合页面增多后的可维护方案在MaterialApp配置routes通过pushNamed/pop跳转3. 路由方法语义pushNamed压栈进入新页pushReplacementNamed替换当前页pushNamedAndRemoveUntil清理历史栈并跳转4. 参数传递命名路由arguments基础路由构造函数传参5. 动态路由控制onGenerateRoute动态生成页面与拦截跳转onUnknownRoute兜底 404 场景十三、这份框架讲义学完后的能力清单如果这部分内容掌握扎实你应该可以独立完成Flutter 环境搭建与常见问题排查页面骨架搭建与组件拆分交互事件处理与setState更新常规布局、滚动、分页和层叠效果父子通信与基础状态协作Dio 网络请求封装与页面数据渲染路由配置、参数传递、动态路由控制结语很多人卡在 Flutter不是因为“写不出页面”而是因为“写得出来但很难维护”。这份框架讲义真正的价值在于从一开始就用工程化方式写 Flutter而不是零散堆代码。建议你把这几块反复练熟状态组件 生命周期滚动体系尤其ListView.builder和CustomScrollViewDio 封装 路由规范把它们练成肌肉记忆后面的综合实战会轻松很多。