当前位置: 首页 > news >正文

flutter 专题 七十 Flutter应用开发之webview_flutter插件

简介

在移动应用开发中,经常会遇到加载网页的需求,打开网页通常有两种方式,即在应用内使用内置的组件打开和使用系统自带的浏览器打开。不过,在Flutter应用开发中,由于官方并没有提供类似Webview的网页加载组件,所以如果项目中涉及网页加载需要使用第三方插件库,如webview_flutter、flutter_webview_plugin等。

其中,webview_flutter是Flutter官方开发和维护的网页加载插件库,而flutter_webview_plugin则是Flutter开源社区推出的网页加载插件。两个插件功能都差不多,都支持加载本地html文本、Flutter调用js以及js调用Flutter等,但是我建议使用官方推出的插件,因为它会持续的跟进已知的问题。

和其他Flutter插件的使用方式一样,使用webview_flutter之前需要先在pubspec.yaml文件中添加依赖脚本,如下所示。

dependencies:
   webview_flutter: ^0.3.22+1

然后,我们使用flutter packages get命令将webview_flutter插件拉取到本地后,就可以使用它进行网页加载开发了。

基本使用

如下所示,是WebView组件的构造函数。

WebView({
    Key key,
    this.onWebViewCreated,             //WebView创建完成之后的回调
    this.initialUrl,                               // 初始化 URL
    this.javascriptMode = JavascriptMode.disabled,    //JS执行模式,默认是不调用
    this.javascriptChannels,             // JS可以调用Flutter 的通道
    this.navigationDelegate,            // 路由委托,可以使用它执行拦截操作
    this.gestureRecognizers,          // 手势相关
    this.onPageStarted,                 //开始加载页面回调
    this.onPageFinished,              // 页面加载完成的回调
    this.onWebResourceError,     //资源加载失败回调
    this.debuggingEnabled = false,
    this.gestureNavigationEnabled = false,
    this.userAgent,
    this.initialMediaPlaybackPolicy =
        AutoMediaPlaybackPolicy.require_user_action_for_all_media_types,
  })

使用时,只需要按照参数传递对应的值即可。不过,在实际使用前,为了方便使用,我们一般会对它进行二次封装,主要是界面和功能的封装。下面是我封装的一个可以加载本地和网络文件的WebViewPage。

class WebViewPage extends StatefulWidget {

  String url;
  final String title;
  final bool isLocalUrl;

  WebViewController _webViewController;

  WebViewPage({this.url, this.isLocalUrl = false, this.title});

  @override
  _WebViewPage createState() => _WebViewPage();


}

class _WebViewPage extends State<WebViewPage> {

  JavascriptChannel jsBridge(BuildContext context) => JavascriptChannel(
      name: 'jsbridge', // 与h5 端的一致 不然收不到消息
      onMessageReceived: (JavascriptMessage message) async{
        debugPrint(message.message);
      });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: _buildAppbar(),
        body: _buildBody()
    );
  }

  _buildAppbar() {
    return AppBar(
        elevation: 0,
        backgroundColor: Color(0xccd0d7),
        title: Text(widget.title, style: TextStyle(color: Colors.black),),
        centerTitle: true,
        leading: IconButton(icon: Icon(Icons.arrow_back, color: Color(0xFF23ADE5),), onPressed: () {

        })
    );
  }

  _buildBody() {
    return Column(
      children: <Widget>[
        SizedBox(
          height: 1,
          width: double.infinity,
          child: const DecoratedBox(decoration: BoxDecoration(color: Color(0xFFEEEEEE))),
        ),
        Expanded(
          flex: 1,
          child: WebView(
            initialUrl: widget.isLocalUrl ? Uri.dataFromString(widget.url, mimeType: 'text/html', encoding: Encoding.getByName('utf-8'))
                .toString(): widget.url,
            javascriptMode: JavascriptMode.unrestricted,
            javascriptChannels: <JavascriptChannel>[
              jsBridge(context)
            ].toSet(),
            onWebViewCreated: (WebViewController controller){
              widget._webViewController = controller;
              if(widget.isLocalUrl){
                  _loadHtmlAssets(controller);
              }else{
                controller.loadUrl(widget.url);
              }
              controller.canGoBack().then((value) => debugPrint(value.toString()));
              controller.canGoForward().then((value) => debugPrint(value.toString()));
              controller.currentUrl().then((value) => debugPrint(value));
            },
            onPageFinished: (String value){
              widget._webViewController.evaluateJavascript('document.title')
                  .then((title) => debugPrint(title));
            },
          ),
        )
      ],
    );
  }

//加载本地文件
  _loadHtmlAssets(WebViewController controller) async {
    String htmlPath = await rootBundle.loadString(widget.url);
    controller.loadUrl(Uri.dataFromString(htmlPath,mimeType: 'text/html', encoding: Encoding.getByName('utf-8'))
        .toString());
  }

}

使用时,只需要按照传入对应的属性即可。需要说明的是,加载本地Html文件时,需要在pubspec.yaml文件中申明这个Html文件,如下所示。

flutter:
 //  ...
  assets:
   - assets/real_data_help.html

然后,我们使用封装的组件即可加载本地的Html文件。例如:

class MyApp extends StatelessWidget {

  String localUrl = 'assets/real_data_help.html';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home:WebViewPage(url:localUrl, isLocalUrl: true, title: '加载本地文件'),
    );
  }
}

运行代码,效果下图所示。

http://www.dtcms.com/a/98433.html

相关文章:

  • C盘清理技巧分享:PE Dism++ 空间清理篇
  • Vue学习笔记集--watch
  • 【SQL】MySQL基础2——视图,存储过程,游标,约束,触发器
  • 关于音频采样率,比特,时间轴的理解
  • ai 项目练习(一)
  • AI来了,新手如何着手学习软件开发?
  • 基于kafka的分布式日志收集平台项目(续)
  • AnimateCC基础教学:随机抽取获奖名单及奖品-V1.0原型版
  • 双非一本毕业测试工作一年想转C++开发,嵌入式Linux与音视频方向哪个方向更合适?
  • JavaScript使用
  • 浅拷贝或深拷贝js数组或对象的方法
  • 常用数据库
  • 使用 Docker Compose 在单节点部署多容器
  • C++ 变量与初始化详解(十五)
  • 【商城实战(100)】商城败局启示录:探寻成功的反方向
  • 【ChatBox】deepseek本地部署
  • 解决 Gradle 构建错误:Could not get unknown property ‘withoutJclOverSlf4J’
  • 【Linux笔记】进程间通信——匿名管道||进程池
  • Linux 系统部署Jump Server服务
  • 使用msmtp和mutt在CentOS上发送指定目录下的所有文件作为邮件附件
  • 聚焦高德开放平台的地图应用场景:创新实践与技术解析
  • 若依赖前端处理后端返回的错误状态码
  • 【新手初学】SQL注入getshell
  • 1、C51单片机(STC8G2K64S4)串口实验
  • Java开发者指南:深入解析PBFT拜占庭容错算法
  • pycharm终端操作远程服务器
  • 【磁盘扩容】linux磁盘扩容
  • Koordinator-Metric查询
  • Python3基础库入门(个人学习用)
  • [ C语言 ] | 从0到1?