1.添加依赖

dependencies:
flutter_webview_plugin: ^0.2.+

2.导入库

import 'import 'package:flutter_webview_plugin/flutter_webview_plugin.dart'; //导入前需要配置

3.属性

const WebviewScaffold({
Key key,
this.appBar,
@required this.url,
this.headers,//
this.withJavascript,//是否允许执行js代码
this.clearCache,//
this.clearCookies,//
this.enableAppScheme,//
this.userAgent,//
this.primary = true,//
this.persistentFooterButtons,//
this.bottomNavigationBar,//
this.withZoom,//是否允许网页缩放
this.withLocalStorage,//是否允许LocalStorage
this.withLocalUrl,//
this.scrollBar,//是否显示滚动条
this.supportMultipleWindows,//
this.appCacheEnabled,//
this.hidden = false,//
this.initialChild,//
this.allowFileURLs,//
this.resizeToAvoidBottomInset = false,//
this.invalidUrlRegex,//
this.geolocationEnabled//
})

4.使用方法  

FlutterWebviewPlugin 插件提供一个链接到唯一webview的单一实例,这样你就可以在app中的任何地方控制webview

import 'package:flutter/material.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';
import 'package:http/http.dart' as http; class Widget_WebView_Page extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return Widget_WebView_State();
}
} class Widget_WebView_State extends State<Widget_WebView_Page> with SingleTickerProviderStateMixin {
FlutterWebviewPlugin flutterWebviewPlugin = FlutterWebviewPlugin();
var title = "WebView组件";
var tabs;
TabController controller;
var choiceIndex = ; //获取h5页面标题
Future<String> getWebTitle() async {
String script = 'window.document.title';
var title = await
flutterWebviewPlugin.evalJavascript(script);
setState(() {
this.title = title;
print('#################### $title');
});
} //获取h5页面标题
Future<String> getWebTitle2({String url}) async {
var client = http.Client();
client.get(url).then(
(response) {
String title = RegExp( r"<[t|T]{1}[i|I]{1}[t|T]{1}[l|L]{1}[e|E]{1}(\s.*)?>([^<]*)</[t|T]{1}[i|I]{1}[t|T]{1}[l|L ]{1}[e|E]{1}>").stringMatch(response.body);
if (title != null) {
title = title.substring(title.indexOf('>') + , title.lastIndexOf("<"));
} else {
title = "";
}
print("#################### " + title);
}
).catchError(
(error) {
print(error);
}
).whenComplete(client.close,);
} @override
void initState() {
super.initState(); /**
* 监听web页加载状态
*/
flutterWebviewPlugin.onStateChanged.listen(
(WebViewStateChanged webViewState) async {
// setState(() {
// title = webViewState.type.toString();
// });
switch (webViewState.type) {
case WebViewState.finishLoad:{
handleJs();
getWebTitle();
}
break;
    case WebViewState.shouldStart:
break;
case WebViewState.startLoad:
break;
case WebViewState.abortLoad:
break;
}
}); /**
* 监听页面加载url
*/
flutterWebviewPlugin.onUrlChanged.listen((String url) {
// getWebTitle(url: url); // setState(() {
// title = url;
// });
}); /**
* 监听x轴滑动距离
* 好像没什么用
*/
// flutterWebviewPlugin.onScrollXChanged.listen((double offsetX) {
// title = offsetX.toString();
// }); // flutterWebviewPlugin.onScrollYChanged.listen((double offsetY) {
// title = offsetY.toString();
// }); tabs = <Widget>[
Tab(
child: GestureDetector(
child: Text("刷新"),
onTap: () {
flutterWebviewPlugin.reload();
},
),
),
Tab(
child: GestureDetector(
child: Text("返回"),
onTap: () {
flutterWebviewPlugin.goBack();
},
),
),
Tab(
child: GestureDetector(
child: Text("加载指定url"),
onTap: () {
flutterWebviewPlugin.reloadUrl("https://www.360.com");
},
),
),
];
controller =
TabController(initialIndex: , length: tabs.length, vsync: this);
} @override
Widget build(BuildContext context) {
return WebviewScaffold(
url: "http://www.baidu.com",
//默认加载地址
appBar: AppBar(
title: Text(title),
backgroundColor: Colors.grey,
leading: GestureDetector(
child: Icon(Icons.arrow_back),
onTap: () {
flutterWebviewPlugin.close();
},
),
bottom: TabBar(
tabs: tabs,
controller: controller,
indicatorColor: Colors.red,
),
actions: <Widget>[],
),
bottomNavigationBar: BottomNavigationBar(
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text(
"首页", /*style: TextStyle(color: Color(0xff333333)),*/
),
activeIcon: Icon(
Icons.home,
color: Color(0xffDE331F),
// size: 30.0,
),
backgroundColor: Color(0xffff0000),
),
BottomNavigationBarItem(
icon: Icon(Icons.devices_other),
title: Text(
"其他", /*style: TextStyle(color: Color(0xff333333)),*/
),
activeIcon: Icon(
Icons.devices_other,
color: Color(0xffDE331F),
// size: 30.0,
),
backgroundColor: Color(0xffff0000),
),
],
currentIndex: choiceIndex,
fixedColor: Color(0xffDE331F),
// iconSize: 30.0,
// type: BottomNavigationBarType.fixed,
onTap: (index) {
if (index == ) {
setState(() {
choiceIndex = ;
flutterWebviewPlugin.reloadUrl("https://www.qq.com/");
});
} else {
setState(() {
flutterWebviewPlugin.reloadUrl("https://www.alipay.com/");
choiceIndex = ;
});
}
}
),
scrollBar: false,
withZoom: false,
);
} @override
void dispose() {
flutterWebviewPlugin.dispose();
super.dispose();
} void handleJs() {
flutterWebviewPlugin.evalJavascript(
"abc(${title}')"
).then((result) {});
}
}

五,webView其它用法

  • 隐藏webview:
    final flutterWebviewPlugin = new FlutterWebviewPlugin();
    flutterWebviewPlugin.launch(url, hidden: true);
  • 关闭webview:
    flutterWebviewPlugin.close();
  • 画一个内部矩形webview:
    final flutterWebviewPlugin = new FlutterWebviewPlugin();
    flutterWebviewPlugin.launch(url,
    fullScreen: false,
    rect: new Rect.fromLTWH(
    0.0,
    0.0,
    MediaQuery.of(context).size.width,
    300.0)
    );

注意:webview并不存在于widget树中,所以你不能在webview中使用如snackbars, dialogs ...这些通知交互widget,更详细一些使用方法可以点击这里;

【Flutter学习】基本组件之Webview组件的更多相关文章

  1. Flutter学习笔记(9)--组件Widget

    如需转载,请注明出处:Flutter学习笔记(9)--组件Widget 在Flutter中,所有的显示都是Widget,Widget是一切的基础,我们可以通过修改数据,再用setState设置数据(调 ...

  2. Flutter学习笔记(10)--容器组件、图片组件

    如需转载,请注明出处:Flutter学习笔记(10)--容器组件.图片组件 上一篇Flutter学习笔记(9)--组件Widget我们说到了在Flutter中一个非常重要的理念"一切皆为组件 ...

  3. Flutter学习笔记(8)--Dart面向对象

    如需转载,请注明出处:Flutter学习笔记(7)--Dart异常处理 Dart作为高级语言,支持面向对象的很多特性,并且支持基于mixin的继承方式,基于mixin的继承方式是指:一个类可以继承自多 ...

  4. Flutter学习笔记(11)--文本组件、图标及按钮组件

    如需转载,请注明出处:Flutter学习笔记(10)--容器组件.图片组件 文本组件 文本组件(text)负责显示文本和定义显示样式,下表为text常见属性 Text组件属性及描述 属性名 类型 默认 ...

  5. Flutter学习笔记(12)--列表组件

    如需转载,请注明出处:Flutter学习笔记(12)--列表组件 在日常的产品项目需求中,经常会有列表展示类的需求,在Android中常用的做法是收集数据源,然后创建列表适配器Adapter,将数据源 ...

  6. Flutter学习笔记(13)--表单组件

    如需转载,请注明出处:Flutter学习笔记(13)--表单组件 表单组件是个包含表单元素的区域,表单元素允许用户输入内容,比如:文本区域,下拉表单,单选框.复选框等,常见的应用场景有:登陆.注册.输 ...

  7. Flutter学习笔记(15)--MaterialApp应用组件及routes路由详解

    如需转载,请注明出处:Flutter学习笔记(15)--MaterialApp应用组件及routes路由详解 最近一段时间生病了,整天往医院跑,也没状态学东西了,现在是好了不少了,也该继续学习啦!!! ...

  8. Flutter学习笔记(16)--Scaffold脚手架、AppBar组件、BottomNavigationBar组件

    如需转载,请注明出处:Flutter学习笔记(15)--MaterialApp应用组件及routes路由详解 今天的内容是Scaffold脚手架.AppBar组件.BottomNavigationBa ...

  9. Flutter学习笔记(18)--Drawer抽屉组件

    如需转载,请注明出处:Flutter学习笔记(18)--Drawer抽屉组件 Drawer(抽屉组件)可以实现类似抽屉拉出和推入的效果,可以从侧边栏拉出导航面板.通常Drawer是和ListView组 ...

随机推荐

  1. Vagrant 入门 - box

    原文地址 Vagrant 使用基础镜像来快速克隆虚拟机,而不是从头开始构建虚拟机.这些基础镜像在 Vagrant 中被称为"box",并且指定用于 Vagrant 环境的 box ...

  2. pygame应用——生产者消费者模型

    因为操作系统的一个生产者-消费者拓展作业,以一个飞机大战的模型修改来的 import pygame import time from pygame.locals import * bulletsNum ...

  3. 关于Visual Studio中书签Bookmark的一些问题

    VS自带一个书签功能,但是有个大问题,没有导出功能,因为这个书签是保存在工程.suo文件中,所以在移动,分享,甚至其他情况下很不方便,甚至丢失. 在你分析一个较大的开源,做了30-50个关键代码书签, ...

  4. JavaScript Sort

    function ArrayList() { var array = []; this.swap = function(index1, index2) { var aux = array[index1 ...

  5. [POJ3612] Telephone Wire(暴力dp+剪枝)

    [POJ3612] Telephone Wire(暴力dp+剪枝) 题面 有N根电线杆,初始高度为h[i],要给相邻的两根连线.可以选择拔高其中一部分电线杆,把一根电线杆拔高\(\Delta H\)的 ...

  6. python学习第十一天列表的分片和运算

    列表的分片也叫切片,也就是从列表中取出一段赋值给另外一个变量,列表运算就是可以进行比较运算,连接运算,乘法运算等. 1,列表的分片 n1=[1,2,3,4,5,6,7,8,9] n2=[1:3] 包含 ...

  7. DMA的认识

    DMA的简单了解与认识 DMA就是为了减轻CPU的负担来设置的存储方式.当从外设取到的数据就不需要经过内核操作,而是通过DMA直接把外设的数据放到内存SRAM中,这样就会减少CPU的负担,让CPU在此 ...

  8. 如何优雅的实现DML批量操作

    如何优雅的实现DML批量操作(转载) 昨天处理了一个业务同学的数据需求,简单来说就是对一张大表做一下数据清理,数据量在8千万左右,需要保留近一个月的数据,大概是400万左右. 对于数据的删除处理,尤其 ...

  9. C# DATETIME格式转换汇总 根据日期获取星期

    原文:C# DATETIME格式转换汇总 根据日期获取星期 C# DateTime.Now.Year --2019(年) DateTime.Now.Month --9(月) DateTime.Now. ...

  10. Android生命周期例子小解

    Activity 从创建到进入运行态所触发的事件 onCreate()-->onStart-->onResume() 从运行态到停止态所触发的事件                 onPa ...