【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

dart 复制代码
@override
  void initState() {
    super.initState();
    _initWebViewController();
  }

  void _initWebViewController() {
    controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..setBackgroundColor(const Color(0x00000000))
      ..setNavigationDelegate(
        NavigationDelegate(
          onProgress: (int progress) {
		// Update loading bar.
          },
          onPageStarted: (String url) {},
          onPageFinished: (String url) {
		//页面加载完成后才能执行js
            _handleBackForbid();
          },
          onWebResourceError: (WebResourceError error) {},
          onNavigationRequest: (NavigationRequest request) {
            return NavigationDecision.navigate;
          },
        ),
      )
      ..loadRequest(Uri.parse('https://www.geekailab.com'));
  }
  

第四步:将WebViewController传递给WebViewWidget

dart 复制代码
@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Flutter Simple Example')),
      body: WebViewWidget(controller: controller),
    );
  }

API说明

WebViewController提供的API

dart 复制代码
///是否启用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);
/// 重新加载当前URL
Future<void> reload();
/// 判断是否可以返回历史记录的上一页
Future<bool> canGoBack();
/// 返回历史记录的上一页
Future<void> goBack();
/// 判断是否可以去往历史记录的下一页
Future<bool> canGoForward();
///跳转到历史记录的下一页
Future<void> goForward();
相关推荐
君蓦2 小时前
Flutter 本地存储与数据库的使用和优化
flutter
problc12 小时前
Flutter中文字体设置指南:打造个性化的应用体验
android·javascript·flutter
lqj_本人20 小时前
鸿蒙next选择 Flutter 开发跨平台应用的原因
flutter·华为·harmonyos
lqj_本人1 天前
Flutter&鸿蒙next 状态管理框架对比分析
flutter·华为·harmonyos
起司锅仔1 天前
Flutter启动流程(2)
flutter
hello world smile1 天前
最全的Flutter中pubspec.yaml及其yaml 语法的使用说明
android·前端·javascript·flutter·dart·yaml·pubspec.yaml
lqj_本人1 天前
Flutter 的 Widget 概述与常用 Widgets 与鸿蒙 Next 的对比
flutter·harmonyos
iFlyCai1 天前
极简实现酷炫动效:Flutter隐式动画指南第二篇之一些酷炫的隐式动画效果
flutter
lqj_本人1 天前
Flutter&鸿蒙next 中使用 MobX 进行状态管理
flutter·华为·harmonyos