flutter与H5路由跳转
大约 1 分钟flutter
概述
Flutter 跳转 H5 有以下几种方式:
loadRequest的方式loadHtmlString的方式loadFile的方式loadFlutterAsset的方式
几种方式的特点对比
| 跳转方式 | 适用范围 | 特点 |
|---|---|---|
loadRequest | 此种方式适合于在 WebView 加载完成后手动触发加载指定 URL | 可以多次加载不同的 URL |
loadHtmlString | 此方式适合于加载 String 类型的 HTML 数据 | 可以多次加载,如果要修改 HTML 中的内容,推荐用此方式 |
loadFile | 此方式适合于加载手机设备上的 HTML 文件 | 比如 H5 离线包可以用此方式加载 |
loadFlutterAsset | 此方式适合于加载 Flutter 项目目录下的静态 HTML 文件 | 需要在 pubspec.yaml 中先注册文件后加载,文件是随项目一起打包在安装包里的 |
加载 assets 下 html 文件
- 在项目根目录下创建目录
assets,和lib是兄弟目录 - 在
assets下创建目录hiH5,并在其下创建文件index.html - 在
pubspec.yaml中配置上面步骤中的目录,特别注意hiH5是目录,所以后面必须要有斜线
assets:
- assets/hiH5/
- 制作页面用于加载项目内的
H5文件,详情见仓库https://gitee.com/chanchaw/flutter_first下的文件flutter_h5_jump_asset.dart
