码迷,mamicode.com
首页 > Web开发 > 详细

【Flutter学习】基本组件之Webview组件

时间:2019-08-18 09:35:00      阅读:310      评论:0      收藏:0      [点我收藏+]

标签:ack   学习   方法   ini   tabs   不能   滑动   load()   head   

1.添加依赖

dependencies:
flutter_webview_plugin: ^0.2.1+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 = 0;

//获取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(>) + 1, 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: 0, 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 == 0) { setState(() { choiceIndex = 0; flutterWebviewPlugin.reloadUrl("https://www.qq.com/"); }); } else { setState(() { flutterWebviewPlugin.reloadUrl("https://www.alipay.com/"); choiceIndex = 1; }); } } ), 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组件

标签:ack   学习   方法   ini   tabs   不能   滑动   load()   head   

原文地址:https://www.cnblogs.com/lxlx1798/p/11371209.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!