Flutter学习基本组件之Webview组件

Posted lxlx1798

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Flutter学习基本组件之Webview组件相关的知识,希望对你有一定的参考价值。

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组件的主要内容,如果未能解决你的问题,请参考以下文章

Flutter学习基本组件之基本表单组件

Flutter学习基本组件之文本组件Text

Flutter学习基本组件之弹窗和提示(SnackBarBottomSheetDialog)

Flutter基础组件08BottomNavigationBar

Flutter基础组件09Button

Flutter基础组件08BottomNavigationBar