【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

1. @override
2.   void initState() {
3.     super.initState();
4.     _initWebViewController();
5.   }
7.   void _initWebViewController() {
8.     controller = WebViewController()
9.       ..setJavaScriptMode(JavaScriptMode.unrestricted)
10.       ..setBackgroundColor(const Color(0x00000000))
11.       ..setNavigationDelegate(
12.         NavigationDelegate(
13.           onProgress: (int progress) {
14.                 // Update loading bar.
15.           },
16.           onPageStarted: (String url) {},
17.           onPageFinished: (String url) {
18.                 //页面加载完成后才能执行js
19.             _handleBackForbid();
20.           },
21.           onWebResourceError: (WebResourceError error) {},
22.           onNavigationRequest: (NavigationRequest request) {
23.             return NavigationDecision.navigate;
24.           },
25.         ),
26.       )
27.       ..loadRequest(Uri.parse('https://www.geekailab.com'));
28.   }
29.   

复制代码

第四步：将WebViewController通报给WebViewWidget

1. @override
2.   Widget build(BuildContext context) {
3.     return Scaffold(
4.       appBar: AppBar(title: const Text('Flutter Simple Example')),
5.       body: WebViewWidget(controller: controller),
6.     );
7.   }

复制代码

API阐明
WebViewController提供的API

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

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。