Flutter进阶

发布日期：2026/08/12标签:# 编程

组件通信

通信方式	方向	适用场景
构造函数传递	父 => 子	简单的数据传递
回调函数	子 => 父	子组件通知父组件
InheritedWidget	祖先 => 后代	跨层级数据共享
Provider	任意组件间	状态管理推荐方案
EventBus	任意组件间	全局事件通信
Bloc / Riverpod	任意组件间	复杂状态管理

父传子（构造函数传参数）

子组件定义接收属性；
子组件在构造函数中接收参数；
父组件传递属性给子组件；
有状态组件在“对外的类”接收属性，“对内的类”通过widget对象获取对应属性；
注意：子组件定义接收属性需要使用final关键字——因为属性由父组件决定，子组件不能随意更改

子传父（回调函数）

父组件传递一个函数给子组件；
子组件调用该函数；
父组件通过回调函数获取参数

网络请求

Dio插件使用

网络请求时Flutter移动开发的核心功能，最常用的网络请求工具时使用Dio插件
安装dio：flutter pub add dio
基本使用

dart

Dio().get("https://geek.itheima.net/v1_0/channels").then((res) {
    print(res);
  }).catchError((error) {});

Dio封装

创建工具类；
构造函数中设置基础地址和超时时间；
添加各类拦截器；
封装统一请求方法；
请求频道数据进行循环渲染解决web跨端问题；
实现UI渲染绘制；

解决web端跨域问题

默认情况下，flutter运行web端加载网络资源会报跨域提示错误。

在flutter/packages/flutter_tools/lib/src/web/chrome.dart 添加’ --disable-web-security ’

!image.png

删除flutter/bin/cache下flutter_tools.snaphot和flutter_tools.stamp
执行 flutter doctor -v 然后重新运行项目

路由管理

定义：路由管理是构建多页面应用的核心，它通过 Navigator 和 Route 来管理页面栈，实现页面跳转和返回

!image.png

基本路由

场景：适合页面不多、跳转逻辑简单的场景
用法：无需提前注册路由，跳转时创建MaterialPageRoute示例即可
跳转新页面：Navigator.push(BuildContext context, Route route)
返回上一页：Navigator.pop(BuildContext context)
注意：MaterialApp是路由系统的组件，是能有一个MaterialApp包裹

命名路由

场景：应用页面增多后，使用命名路由提升代码可维护性
用法：需要先在MaterialApp中注册一个路由表（routes）并设置initialRoute（首页）

跳转方法：

方法	核心作用	使用场景	典型场景
pushNamed	进入新页面	A, B → A, B, C	常规页面跳转，如列表页进入详情页
pushReplacementNamed	替换当前页面	A, B → A, C	登录成功后跳转主页，并无法返回登录页
pushNamedAndRemoveUntil	跳转新页面并清理栈	A, B, C, D → A, E	退出登录后跳转登录页，并清空所有历史页面
popAndPushNamed	返回并立即跳转新页面	A, B, C → A, B, D	购物车页面结算后，返回商品列表并同时跳转到订单页
popUntil	连续返回直到条件满足	A, B, C, D → A, B	从设置页的深层级，一键返回到主设置页面

传递参数

作用：通过路由传递参数时实现页面间数据通信的常用方式
传递参数：Navigator.pushNamed(context, 地址, arguments:{参数})
接收参数：ModalRoute.of(context)?.setting.arguments
接收时机：initState获取不到路由参数，方式在Future.microtask（异步微任务）中

基础路由 - 传递参数

传递参数：通过组件构造函数传递参数
接收参数：通过组件构造函数接收参数
接收时机：initState可获取到基础路由的构造函数传参

动态路由与高级控制

场景：根据参数动态生成页面，或实现路由拦截，可使用onGenerateRoute和onUnknownRoute

!image.png

onGenerateRoute：允许根据RouteSetting（包含路由名称和参数）动态创建不同的Route
onUnknownRoute：跳转一个未在路由表中注册、也未在onGenerateRoute中处理的路由，会调用此回调。通常显示“404”页面