【Flutter】webview_flutter使用详解

文章目录

前言

webview_flutter是Flutter官方推出的一款用于Flutter上的webview插件，该插件在 iOS 用的是WKWebView 支持； 在 Android 上用的是系统WebView。

插件地址：https://pub.dev/packages/webview_flutter

一、如何使用

第一步：在项目根目录下运行如下命令配置依赖

flutter pub add webview_flutter

第二步：导入
在需要使用WebView的页面添加：

import ‘package:webview_flutter/webview_flutter.dart’;

第三步：初始化一个WebViewController

@overridevoidinitState(){super.initState();_initWebViewController();}void_initWebViewController(){
    controller =WebViewController()..setJavaScriptMode(JavaScriptMode.unrestricted)..setBackgroundColor(constColor(0x00000000))..setNavigationDelegate(NavigationDelegate(
          onProgress:(int progress){// Update loading bar.},
          onPageStarted:(String url){},
          onPageFinished:(String url){//页面加载完成后才能执行js_handleBackForbid();},
          onWebResourceError:(WebResourceError error){},
          onNavigationRequest:(NavigationRequest request){returnNavigationDecision.navigate;},),)..loadRequest(Uri.parse('https://www.geekailab.com'));}

第四步：将WebViewController传递给WebViewWidget

@overrideWidgetbuild(BuildContext context){returnScaffold(
      appBar:AppBar(title:constText('Flutter Simple Example')),
      body:WebViewWidget(controller: controller),);}

API说明
WebViewController提供的API

///是否启用JavaScript执行，默认不启用Future<void>setJavaScriptMode(JavaScriptMode javaScriptMode);///设置webview的背景色Future<void>setBackgroundColor(Color color);/// 当WebView的导航状态发生变化时会回调此方法，在此法中可以进行跳转拦截；/// 这里的 NavigationDecision.prevent表示阻止路由替换，NavigationDecision.navigate表示允许路由替换Future<void>setNavigationDelegate(NavigationDelegate delegate);///加载一个URL/// uri：可以通过Uri.parse(url)来将url转成uri/// method：支持get请求和post请求两种，默认为get/// headers：发起url加载是携带的header信息，根据请求的网站要求进行传递/// body：发起url请求是携带的body信息，可空Future<void>loadRequest(Uri uri,{LoadRequestMethod method =LoadRequestMethod.get,Map<String,String> headers =const<String,String>{},Uint8List? body,})///设置WebView 是否应支持使用其屏幕缩放控件和手势进行缩放，默认支持；Future<void>enableZoom(bool enabled);///用于设置HTTP User-Agent: 请求标头的值Future<void>setUserAgent(String? userAgent);///返回此 WebView 的历史记录。/// 如果没有返回历史记录项，则这是一个无操作。Future<void>goBack();/// 返回 WebView 正在显示的当前 URL。/// 如果没有加载过 URL，则返回 `null`。Future<String?>currentUrl();///运行JS代码，javaScript，要运行的JS代码Future<void>runJavaScript(String javaScript);/// 运行JS代码并接收运行结果/// javaScriptString：要运行的JS代码/// 返回：JS运行的结果Future<Object>runJavaScriptReturningResult(String javaScript);/// 重新加载当前URLFuture<void>reload();/// 判断是否可以返回历史记录的上一页Future<bool>canGoBack();/// 返回历史记录的上一页Future<void>goBack();/// 判断是否可以去往历史记录的下一页Future<bool>canGoForward();///跳转到历史记录的下一页Future<void>goForward();