Flutter 中使用 WebView 展示网页内容全剖析

目录
Flutter 中使用 WebView 展示网页内容全剖析
一、添加依赖
二、导入库
三、创建 WebView 组件
四、处理网页加载状态
五、与 JavaScript 交互（可选）

---

在 Flutter 开发中，利用webview_flutter库来展示网页内容是一项常见需求。本文将详细先容如何在 Flutter 项目里集成webview_flutter库，实现展示网页内容的功能，同时附上完整代码示例。
一、添加依赖


起首，在 Flutter 项目标pubspec.yaml文件中添加webview_flutter依赖。打开pubspec.yaml，在dependencies下添加如下代码：

1. dependencies:
2.   webview_flutter: ^[具体版本号]

复制代码

添加完成后，点击Packages get按钮，让 Flutter 下载并安装该依赖。
二、导入库


在需要使用 WebView 的 Dart 文件顶部，导入webview_flutter库：

1. import 'package:webview_flutter/webview_flutter.dart';

复制代码

三、创建 WebView 组件


在 Flutter 的 Widget 树中，创建一个WebView组件来加载和展示网页。以下是一个简单示例：

1. import 'package:flutter/material.dart';import 'package:webview_flutter/webview_flutter.dart';
2. class WebViewPage extends StatefulWidget {  @override  _WebViewPageState createState() => _WebViewPageState();}class _WebViewPageState extends State<WebViewPage> {  late WebViewController _controller;  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: Text('展示网页'),      ),      body: WebView(        initialUrlRequest: URLRequest(url: Uri.parse('https://www.example.com')),        javascriptMode: JavascriptMode.unrestricted,        onWebViewCreated: (WebViewController controller) {          _controller = controller;        },      ),    );  }}

复制代码

在上述代码中：

• WebView组件吸收initialUrlRequest属性，用于指定要加载的网页 URL。这里以https://www.example.com为例，实际使用时更换为你想要展示的网页地址。
  
• javascriptMode设置为JavascriptMode.unrestricted，表现允许 WebView 执行 JavaScript 代码。假如网页中包含 JavaScript 交互，这一设置很紧张。
  
• onWebViewCreated回调函数在 WebView 创建完成后被调用，通过它可以获取WebViewController对象，后续可用于对 WebView 举行更多操作，比如导航、执行 JavaScript 代码等。
  

四、处理网页加载状态


为了提供更好的用户体验，我们通常需要处理网页加载的差异状态，比如加载中、加载完成、加载失败等。可以通过WebView的onPageStarted、onPageFinished和onWebResourceError回调函数来实现。

1. import 'package:flutter/material.dart';import 'package:webview_flutter/webview_flutter.dart';
2. class WebViewPage extends StatefulWidget {  @override  _WebViewPageState createState() => _WebViewPageState();}class _WebViewPageState extends State<WebViewPage> {  late WebViewController _controller;  bool _isLoading = true;  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: Text('展示网页'),      ),      body: Stack(        children: [          WebView(            initialUrlRequest: URLRequest(url: Uri.parse('https://www.example.com')),            javascriptMode: JavascriptMode.unrestricted,            onWebViewCreated: (WebViewController controller) {              _controller = controller;            },            onPageStarted: (String url) {              setState(() {                _isLoading = true;              });            },            onPageFinished: (String url) {              setState(() {                _isLoading = false;              });            },            onWebResourceError: (WebResourceError error) {              setState(() {                _isLoading = false;                // 这里可以根据error举行错误提示处理              });            },          ),          if (_isLoading)            Center(              child: CircularProgressIndicator(),            )        ],      ),    );  }}

复制代码

在这个更新后的代码中：

• 新增了一个_isLoading布尔变量来跟踪网页加载状态。
  
• onPageStarted回调函数在网页开始加载时被调用，将_isLoading设为true。
  
• onPageFinished回调函数在网页加载完成时被调用，将_isLoading设为false。
  
• onWebResourceError回调函数在网页加载出错时被调用，同样将_isLoading设为false，并可在此处添加错误提示逻辑。
  
• 使用Stack组件将WebView和CircularProgressIndicator（加载指示器）堆叠在一起，当_isLoading为true时，显示加载指示器。
  

五、与 JavaScript 交互（可选）


假如网页中的 JavaScript 需要与 Flutter 举行交互，可以利用WebViewController的evaluateJavascript方法来执行 JavaScript 代码，以及通过flutter_inappwebview库（功能更强大，支持双向通讯）等方式实现更复杂的交互。

例如，假设网页中有一个 JavaScript 函数getTitle用于获取网页标题，在 Flutter 中可以这样调用：

1. Future<String?> getPageTitle() async {
2.   return await _controller.evaluateJavascript('getTitle()');
3. }

复制代码

调用getPageTitle函数后，就能获取到网页标题（返回值为Future<String?>，需要异步处理）。

通过以上步骤，你就可以在 Flutter 项目中成功使用WebView展示网页内容，并实现加载状态处理、与 JavaScript 交互等功能，满足差异的业务需求。

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