flutter加载本地html标签,Flutter中如何加载并预览本地的html文件的方法
直接进入主题,大概步骤如下在 assets 创建需要访问 html 文件,如下这里创建一个files文件夹,专门来放这些静态 html 文件.在 pubspec.yaml 中配置访问位置assets:- assets/images/- assets/files/在 pubspec.yaml 添加 webview_flutter 插件依赖webview_flutter: ^0.3.15+1// 具体
直接进入主题,大概步骤如下
在 assets 创建需要访问 html 文件,如下
这里创建一个files文件夹,专门来放这些静态 html 文件.
在 pubspec.yaml 中配置访问位置
assets:
- assets/images/
- assets/files/
在 pubspec.yaml 添加 webview_flutter 插件依赖
webview_flutter: ^0.3.15+1
// 具体版本请查看官网
进入实际的代码操作
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:webview_flutter/webview_flutter.dart';
class agreementpage extends statefulwidget {
@override
_agreementpagestate createstate() => _agreementpagestate();
}
class _agreementpagestate extends state {
webviewcontroller _webviewcontroller;
string filepath = 'assets/files/agreement.html';
@override
widget build(buildcontext context) {
return scaffold(
appbar: appbar(title: text('享你来服务条款')),
body: webview(
initialurl: '',
javascriptmode: javascriptmode.unrestricted,
onwebviewcreated: (webviewcontroller webviewcontroller) {
_webviewcontroller = webviewcontroller;
_loadhtmlfromassets();
},
)
);
}
_loadhtmlfromassets() async {
string filehtmlcontents = await rootbundle.loadstring(filepath);
_webviewcontroller.loadurl(uri.datafromstring(filehtmlcontents,
mimetype: 'text/html', encoding: encoding.getbyname('utf-8'))
.tostring());
}
}
最终预览的效果如下
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持萬仟网。
更多推荐
所有评论(0)