Flutter webview实现以及Appbar和手机返回键的监听

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_39347285/article/details/86219020

webview部分

在Android中我们经常会需要打开一些html前端界面,这个时候我们通常都会使用webview通过url来加载网页,而在Flutter中是否也有类似webview的Widget呢?很可惜,答案是暂时没有,但是却有一个插件可以使用,那就是 flutter_webview_plugin。

flutter_webview_plugin基本使用:

1.要使用flutter_webview_plugin,首先要去pubspec.yaml文件下先配置导入插件

dependencies:
  flutter_webview_plugin: ^0.3.0+2

值得一提的是这个文件对于代码格式有着极高的要求,像Python一样需要严格对齐。
添加以后点击右上角的Packages get等待导入。
2.导入成功后在需要webview的Dart文件下导包

import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';

我这里因为只是一个Demo,所以我就直接贴源码了:

import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';
import 'package:flutter/material.dart';
void main(){
  runApp(new MaterialApp(
    routes: {
      '/':(_) => new WebviewScaffold(
          url: "http://www.baidu.com/",
          appBar: new AppBar(
            title: new Text("webview"),
          ),
      ),
    },
  ));
}

运行效果如下:
在这里插入图片描述

这里还不得不说一件事,因为webview不存在于widget树中导致想在webview上弹出Flutter的Dialog我暂时还未能找到解决办法。

监听Appbar和手机返回键部分

如果想监控返回键和Appbar上的返回键,可以使用Flutter中的WillPopScope,具体的我就不说了,直接贴代码,里面的参数大家应该也看得懂

import 'package:flutter/material.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';
class WebViewPage extends StatelessWidget {
  String title;
  String url;
  BuildContext context;
  WebViewPage(String title,String url){
    this.title=title;
    this.url=url;
  }

  Future<bool> _requestPop() {
    Navigator.of(context).pop(100);///弹出页面并传回int值100,用于上一个界面的回调
    return new Future.value(false);
  }


  @override
  Widget build(BuildContext context) {
    this.context=context;
    // TODO: implement build
    return
      new WillPopScope(
        child:
        new WebviewScaffold(
          url: url,
          appBar: new AppBar(
            iconTheme: IconThemeData(
                color: Colors.white
            ),
            backgroundColor: Color.fromARGB(255, 41, 58, 144),
            title: new Text(title,style: new TextStyle(color: Colors.white),),
          ),
        ),
        onWillPop: _requestPop);
  }
}
///这里是上一个界面用于接收webview返回键回调的部分
int coordinates = await Navigator.of(_context).push(
        MaterialPageRoute(
        builder: (_context) => new WebViewPage("test", data.url)
    )
);
if(coordinates==100){
 ///这里填上当接收回调成功后要执行的操作
}

点击返回键webview无效了。

04-21

具体情况是这样的:一个网页里面需要调用安卓的拍照功能和到图库中选择图片,所以用到了webview,点击网页按钮后,弹出安卓的对话框,“拍照” 或者“进入图库”,之后选择当前照片或者选定图库中的图片后,返回给网页。rnrn正常情况下,一路选择到图库,并且也选择了图片,这都没问题。但是如果在弹出选择对话框后,敲击对话框之外的任何地方,或者直接点击返回键,取消掉对话框,这个时候,再次点击网页按钮,就没有任何反应了。 此时的webview就只能看,上面的任何操作都变的无效了,包括网页链接也是如此! rnrn这是怎么回事啊。rnrn附上源码:rnrnwebView.setWebChromeClient(new MyWebChromeClient() rn rn //****************************** 实现文件上传 ************************rn // For Android 3.0+rn public void openFileChooser(ValueCallback uploadMsg, String acceptType) rn Log.d("myu", "For Android 3.0+");rn if (mUploadMessage != null) rn return;rn Log.d("myu", uploadMsg.toString() + " " + acceptType);rn rn mUploadMessage = uploadMsg; rn selectImage();rn rn // For Android < 3.0rn public void openFileChooser(ValueCallback uploadMsg) rn openFileChooser( uploadMsg, "" );rn rn // For Android > 4.1.1rn public void openFileChooser(ValueCallback uploadMsg, String acceptType, String capture) rn Log.d("myu", "For Android 4.1.1");rn openFileChooser(uploadMsg, acceptType);rn rnrnrn protected final void selectImage() rnrn boolean flag = Environment.getExternalStorageState().equals(rn Environment.MEDIA_MOUNTED);rn if (!flag) rn Toast.makeText(this, "请插入手机存储卡再使用本功能", Toast.LENGTH_SHORT).show();rn return;rn rnrn Log.d("myu", "selectImage");rnrn String[] selectPicTypeStr = "拍照", "从相册中选择" ;rn AlertDialog.Builder builder = new AlertDialog.Builder(this);rn builder.setTitle("选择图片");rn // .setCancelable(false) 让返回键失效rn //builder.setOnKeyListener(onKeyListener);rnrn builder.setItems(selectPicTypeStr,rn new DialogInterface.OnClickListener() rn @Overridern public void onClick(DialogInterface dialog, int which) rn switch (which) rn case 0:rn // 相机拍摄rn openCarcme();rn break;rn case 1:rn // 手机相册rn chosePic();rn break;rn default:rn Log.d("myu", "nonono");rn break;rn rn compressPath = Environmentrn .getExternalStorageDirectory().getPath()rn + "/sspset/temp";rn new File(compressPath).mkdirs();rn compressPath = compressPath + File.separatorrn + "compress.jpg";rn rn );rn AlertDialog dialog = builder.create(); rn dialog.show();rn rnrn@Overridern protected void onActivityResult(int requestCode, int resultCode,rn Intent intent) rnrn Log.d("myu", String.valueOf(resultCode));rn rn super.onActivityResult(requestCode, resultCode, intent);rnrn Log.d("myu", "onActivityResult2");rn rn if (null == mUploadMessage)rn return;rn Uri uri = null;rn // 判断是何种返回rn if (resultCode == RESULT_OK) rn if (requestCode == REQ_CAMERA) rn afterOpenCamera();rn uri = cameraUri;rn else if (requestCode == REQ_CHOOSE) rn uri = afterChosePic(intent);rn rn mUploadMessage.onReceiveValue(uri);rn mUploadMessage = null;rnrn else if (resultCode == RESULT_CANCELED) rn // 取消rn Log.d("myu", "RESULT_CANCELED");rnrn rn

没有更多推荐了,返回首页

私密
私密原因:
请选择设置私密原因
  • 广告
  • 抄袭
  • 版权
  • 政治
  • 色情
  • 无意义
  • 其他
其他原因:
120
出错啦
系统繁忙,请稍后再试