dependencies:
  webview_flutter:
    git:
      url: "https://gitcode.com/openharmony-tpc/flutter_packages.git"
      path: "packages/webview_flutter"

flutter pub get

"requestPermissions": [
  {
    "name": "ohos.permission.INTERNET",
    "reason": "$string:network_reason",
    "usedScene": {
      "abilities": ["EntryAbility"],
      "when": "inuse"
    }
  }
]

{
  "string": [
    {
      "name": "network_reason",
      "value": "使用網(wǎng)絡訪問網(wǎng)頁內(nèi)容"
    }
  ]
}

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

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

  @override
  State<WebViewExample> createState() => _WebViewExampleState();
}

class _WebViewExampleState extends State<WebViewExample> {
  late final WebViewController _controller;

  @override
  void initState() {
    super.initState();
    
    // 創(chuàng)建 WebViewController
    _controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted) // 啟用 JavaScript
      ..setBackgroundColor(const Color(0x00000000)) // 設置透明背景
      ..setNavigationDelegate( // 設置導航委托
        NavigationDelegate(
          onProgress: (int progress) {
            // 更新加載進度
            debugPrint('WebView is loading (progress : $progress%)');
          },
          onPageStarted: (String url) {
            debugPrint('Page started loading: $url');
          },
          onPageFinished: (String url) {
            debugPrint('Page finished loading: $url');
          },
          onWebResourceError: (WebResourceError error) {
            debugPrint('\n\n====\nError: $error\n====\n\n');
          },
          onNavigationRequest: (NavigationRequest request) {
            // 控制導航?jīng)Q策
            if (request.url.startsWith('https://www.youtube.com/')) {
              debugPrint('blocking navigation to ${request.url}');
              return NavigationDecision.prevent;
            }
            debugPrint('allowing navigation to ${request.url}');
            return NavigationDecision.navigate;
          },
        ),
      )
      ..loadRequest(Uri.parse('https://flutter.dev')); // 加載初始 URL
  }

  // ...
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Text('Flutter WebView 示例'),
      // 添加導航控制按鈕
      actions: [
        NavigationControls(_controller),
      ],
    ),
    body: WebViewWidget(controller: _controller), // 顯示 WebView
  );
}

class NavigationControls extends StatelessWidget {
  const NavigationControls(this._webViewController, {Key? key}) : super(key: key);

  final WebViewController _webViewController;

  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        IconButton(
          icon: const Icon(Icons.arrow_back_ios),
          onPressed: () async {
            if (await _webViewController.canGoBack()) {
              await _webViewController.goBack();
            } else {
              if (context.mounted) {
                ScaffoldMessenger.of(context).showSnackBar(
                  const SnackBar(content: Text('No back history item')),
                );
              }
            }
          },
        ),
        IconButton(
          icon: const Icon(Icons.arrow_forward_ios),
          onPressed: () async {
            if (await _webViewController.canGoForward()) {
              await _webViewController.goForward();
            } else {
              if (context.mounted) {
                ScaffoldMessenger.of(context).showSnackBar(
                  const SnackBar(content: Text('No forward history item')),
                );
              }
            }
          },
        ),
        IconButton(
          icon: const Icon(Icons.replay),
          onPressed: () => _webViewController.reload(),
        ),
      ],
    );
  }
}

// 執(zhí)行 JavaScript 代碼
_controller.runJavaScript('alert("Hello from Flutter!");');

// 執(zhí)行 JavaScript 代碼并獲取返回結(jié)果
final result = await _controller.runJavaScriptReturningResult(
  'document.body.innerText.length'
);
debugPrint('Body text length: $result');

// 添加 JavaScript 通道
_controller.addJavaScriptChannel(
  'Toaster',
  onMessageReceived: (JavaScriptMessage message) {
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(content: Text(message.message)),
    );
  },
);

// 在網(wǎng)頁中發(fā)送消息到 Flutter
// window.Toaster.postMessage('Hello from JavaScript!');

// 加載網(wǎng)絡資源
_controller.loadRequest(Uri.parse('https://flutter.dev'));

// 加載本地文件
_controller.loadFile('/path/to/local/file.html');

// 加載 Flutter 資源
_controller.loadFlutterAsset('assets/html/index.html');

// 加載 HTML 字符串
_controller.loadHtmlString('''
<html>
<body>
  <h1>Hello, World!</h1>
  <p>This is HTML content loaded from a string.</p>
</body>
</html>
''', baseUrl: Uri.parse('https://example.com'));