Flutter WebView应用：如何处理404及网页无法加载等错误

要实现WebView加载失败（如404、网络错误）时显示自定义页面，你需要通过状态变量控制视图切换，同时完善WebViewController的初始化和错误回调逻辑。以下是修改后的完整代码：

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

import '../main.dart';

class Outlook extends StatefulWidget {
  const Outlook({Key? key}) : super(key: key);

  @override
  State<Outlook> createState() => _OutlookState();
}

class _OutlookState extends State<Outlook> {
  bool isLoading = true;
  bool _showErrorPage = false; // 控制错误页面显示
  late WebViewController _controller;
  final _key = UniqueKey();
  final String _targetUrl = "https://outlook.office.com/"; // 抽离目标URL，方便重试调用

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Outlook"),
        backgroundColor: const Color(0xff6200EE),
        centerTitle: true,
      ),
      body: Stack(
        children: <Widget>[
          // 仅在无错误时显示WebView
          if (!_showErrorPage)
            WebView(
              key: _key,
              initialUrl: _targetUrl,
              javascriptMode: JavascriptMode.unrestricted,
              onWebViewCreated: (controller) {
                // 初始化控制器，确保后续能调用加载方法
                _controller = controller;
              },
              onWebResourceError: (WebResourceError error) {
                // 捕获加载错误，切换到错误页面
                setState(() {
                  isLoading = false;
                  _showErrorPage = true;
                });
              },
              onPageFinished: (finish) {
                setState(() {
                  isLoading = false;
                  _showErrorPage = false; // 加载成功时重置错误状态
                });
              },
            ),
          // 加载指示器
          if (isLoading && !_showErrorPage)
            const Center(child: CircularProgressIndicator()),
          // 自定义错误页面
          if (_showErrorPage)
            Container(
              color: Colors.white,
              child: Center(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    const Icon(Icons.error_outline, size: 64, color: Colors.red),
                    const SizedBox(height: 16),
                    const Text(
                      "页面加载失败",
                      style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
                    ),
                    const SizedBox(height: 8),
                    const Text(
                      "请检查网络连接或稍后重试",
                      style: TextStyle(color: Colors.grey),
                    ),
                    const SizedBox(height: 24),
                    ElevatedButton(
                      onPressed: () {
                        // 重试加载原URL
                        setState(() {
                          isLoading = true;
                          _showErrorPage = false;
                        });
                        _controller.loadUrl(_targetUrl);
                      },
                      child: const Text("重试"),
                    ),
                  ],
                ),
              ),
            ),
        ],
      ),
      drawer: const Navigation(),
    );
  }
}

关键改动说明： #

• 新增_showErrorPage状态变量：用于切换WebView和自定义错误页面的显示状态
• 完善控制器初始化：通过onWebViewCreated回调获取WebViewController实例，确保重试功能正常调用
• 优化错误回调逻辑：捕获加载错误后立即更新状态，触发错误页面显示
• 添加自定义错误页面：包含错误提示、重试按钮，提升用户体验
• 重置状态逻辑：页面加载成功时自动隐藏错误页面，避免状态冲突

内容的提问来源于stack exchange，提问作者Aman Singh