?近期推薦：求職神器

https://bbs.csdn.net/topics/619384540

🔥歡迎大家訂閱系列專欄：flutter_鴻蒙next
💬淼學(xué)派語錄：只有不斷的否認(rèn)自己和肯定自己，才能走出彎曲不平的泥濘路，因為平坦的大路，太tm無趣了！

目錄

寫在前面

1. 添加依賴

2. 配置平臺權(quán)限

3. 創(chuàng)建 WebView 頁面

4. 從 Flutter 項目跳轉(zhuǎn)到 WebView 頁面

5. 適配不同機型

6. 從 WebView 返回攜帶參數(shù)

7. 測試與調(diào)試

寫在最后

---

寫在前面

在 Flutter 中集成 WebView 是一種常見需求，可以用于展示網(wǎng)頁或進(jìn)行在線操作。以下是如何在 Flutter 項目中實現(xiàn) WebView，適配不同機型，并處理頁面間參數(shù)傳遞的詳細(xì)步驟。

1. 添加依賴

首先，在 pubspec.yaml 中添加 webview_flutter 插件：

dependencies:flutter:sdk: flutterwebview_flutter: ^latest_version

然后，運行 flutter pub get 安裝依賴。

2. 配置平臺權(quán)限

鴻蒙nextOS：鴻蒙應(yīng)用中設(shè)置并使用網(wǎng)絡(luò)權(quán)限。可以在?

module.json5

?文件中聲明網(wǎng)絡(luò)權(quán)限。

{"permissions": ["ohos.permission.INTERNET"]
}

Android: 在 AndroidManifest.xml 中，添加網(wǎng)絡(luò)權(quán)限：

<uses-permission android:name="android.permission.INTERNET"/>

iOS: 在 Info.plist 中，添加以下配置以允許訪問網(wǎng)絡(luò)：

<key>NSAppTransportSecurity</key>
<dict><key>NSAllowsArbitraryLoads</key><true/>
</dict>

3. 創(chuàng)建 WebView 頁面

在你的 Flutter 項目中創(chuàng)建一個 WebView 頁面。例如：

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';class WebViewPage extends StatefulWidget {final String url;WebViewPage({required this.url});@override_WebViewPageState createState() => _WebViewPageState();
}class _WebViewPageState extends State<WebViewPage> {late WebViewController _controller;bool _isLoading = true;@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('WebView Example'),),body: Stack(children: [WebView(initialUrl: widget.url,javascriptMode: JavascriptMode.unrestricted,onWebViewCreated: (WebViewController webViewController) {_controller = webViewController;},onPageFinished: (String url) {setState(() {_isLoading = false;});},),if (_isLoading)Center(child: CircularProgressIndicator()),],),);}
}

4. 從 Flutter 項目跳轉(zhuǎn)到 WebView 頁面

在 Flutter 的主頁面或其他地方，可以通過 Navigator 跳轉(zhuǎn)到 WebView 頁面：

Navigator.push(context,MaterialPageRoute(builder: (context) => WebViewPage(url: 'https://flutter.dev'),),
);

5. 適配不同機型

為了確保 WebView 在不同機型上的適配，使用 MediaQuery 獲取屏幕尺寸并設(shè)置 WebView 的高度和寬度：

final screenWidth = MediaQuery.of(context).size.width;
final screenHeight = MediaQuery.of(context).size.height;WebView(initialUrl: widget.url,javascriptMode: JavascriptMode.unrestricted,// 這里可以根據(jù)需要調(diào)整高度和寬度
);

6. 從 WebView 返回攜帶參數(shù)

要從 WebView 返回到 Flutter 頁面并攜帶參數(shù)，可以在 WebView 中使用 JavaScript 與 Flutter 進(jìn)行交互?？梢酝ㄟ^ evaluateJavascript 傳遞數(shù)據(jù)：

// 在 WebView 中調(diào)用
final result = await _controller.evaluateJavascript("someFunction()");
Navigator.pop(context, result);

在 Flutter 中接收參數(shù)：

final result = await Navigator.push(context,MaterialPageRoute(builder: (context) => WebViewPage(url: 'https://your-url.com'),),
);
if (result != null) {// 處理返回的參數(shù)print(result);
}

7. 測試與調(diào)試

在不同設(shè)備上進(jìn)行測試，確保 WebView 的顯示效果和功能正常。使用 Flutter 的熱重載功能可以快速查看更改。

寫在最后

通過上述步驟，你可以在 Flutter 項目中有效實現(xiàn) WebView，適配不同機型，并實現(xiàn)頁面間的數(shù)據(jù)傳遞。這樣的實現(xiàn)不僅豐富了應(yīng)用的功能，也提升了用戶體驗。通過調(diào)試和優(yōu)化，確保 WebView 的性能和穩(wěn)定性。