Flutter学习基本组件之Webview组件

Posted 2022-07-29 lxlx1798

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，更详细一些使用方法可以点击这里；