跳至主要內容

flutter与H5路由跳转

chanchaw大约 1 分钟flutter

概述

Flutter 跳转 H5 有以下几种方式:

  1. loadRequest 的方式
  2. loadHtmlString 的方式
  3. loadFile 的方式
  4. loadFlutterAsset 的方式

几种方式的特点对比

跳转方式适用范围特点
loadRequest此种方式适合于在 WebView 加载完成后手动触发加载指定 URL可以多次加载不同的 URL
loadHtmlString此方式适合于加载 String 类型的 HTML 数据可以多次加载,如果要修改 HTML 中的内容,推荐用此方式
loadFile此方式适合于加载手机设备上的 HTML 文件比如 H5 离线包可以用此方式加载
loadFlutterAsset此方式适合于加载 Flutter 项目目录下的静态 HTML 文件需要在 pubspec.yaml 中先注册文件后加载,文件是随项目一起打包在安装包里的

加载 assets 下 html 文件

  1. 在项目根目录下创建目录 assets ,和 lib 是兄弟目录
  2. assets 下创建目录 hiH5 ,并在其下创建文件 index.html
  3. pubspec.yaml 中配置上面步骤中的目录,特别注意 hiH5 是目录,所以后面必须要有斜线
  assets:
    - assets/hiH5/
  1. 制作页面用于加载项目内的 H5 文件,详情见仓库 https://gitee.com/chanchaw/flutter_first 下的文件 flutter_h5_jump_asset.dart