写点什么

Flutter & 鸿蒙 Next 中如何实现 WebView【跳、显、适、反】等一些基础问题

作者:淼.
  • 2025-03-14
    北京
  • 本文字数:2460 字

    阅读完需:约 8 分钟

在现代应用开发中,WebView 是一种常见的需求,用于展示网页内容或进行在线操作。Flutter 和鸿蒙 Next 都提供了强大的支持来实现 WebView 功能。本文将详细探讨如何在 Flutter 和鸿蒙 Next 中实现 WebView 的基础功能,包括页面跳转、显示、适配以及反向跳转等问题。



一、Flutter 中实现 WebView

(一)添加依赖

在 Flutter 中,使用 webview_flutter 插件来实现 WebView 功能。首先,在 pubspec.yaml 文件中添加依赖:


dependencies:  flutter:    sdk: flutter  webview_flutter: ^latest_version
复制代码


运行 flutter pub get 安装依赖。

(二)配置平台权限

为了使 WebView 能够访问网络,需要在不同平台配置相应的权限:


  • Android:在 AndroidManifest.xml 中添加网络权限:


  <uses-permission android:name="android.permission.INTERNET"/>
复制代码


  • iOS:在 Info.plist 中添加以下配置以允许访问网络:


  <key>NSAppTransportSecurity</key>  <dict>    <key>NSAllowsArbitraryLoads</key>    <true/>  </dict>
复制代码

(三)创建 WebView 页面

以下是一个简单的 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;
@override Widget 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()), ], ), ); }}
复制代码

(四)从 Flutter 项目跳转到 WebView 页面

在 Flutter 的主页面或其他地方,可以通过 Navigator 跳转到 WebView 页面:


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

(五)适配不同机型

为了确保 WebView 在不同机型上的适配,可以使用 MediaQuery 获取屏幕尺寸并设置 WebView 的高度和宽度:


final screenWidth = MediaQuery.of(context).size.width;final screenHeight = MediaQuery.of(context).size.height;
WebView( initialUrl: widget.url, javascriptMode: JavascriptMode.unrestricted,);
复制代码

(六)从 WebView 返回携带参数

要从 WebView 返回到 Flutter 页面并携带参数,可以在 WebView 中使用 JavaScript 与 Flutter 进行交互。可以通过 evaluateJavascript 传递数据:


final result = await _controller.evaluateJavascript("someFunction()");Navigator.pop(context, result);
复制代码


在 Flutter 中接收参数:


final result = await Navigator.push(  context,  MaterialPageRoute(    builder: (context) => WebViewPage(url: 'https://your-url.com'),  ),);if (result != null) {  print(result);}
复制代码



二、鸿蒙 Next 中实现 WebView

鸿蒙 Next 提供了 WebView 组件来展示网页内容。以下是一个简单的实现:

(一)添加依赖

在鸿蒙 Next 中,使用 webview 模块来实现 WebView 功能。在 module.json5 文件中添加依赖:


{  "dependencies": {    "webview": "latest_version"  }}
复制代码

(二)配置平台权限

在鸿蒙 Next 中,需要在 module.json5 文件中声明网络权限:


{  "permissions": [    "ohos.permission.INTERNET"  ]}
复制代码

(三)创建 WebView 页面

以下是一个简单的 WebView 页面实现:


import { Component, State } from '@ohos.arkui';import { WebView } from '@ohos.webview';
@Componentstruct WebViewPage { @State url: string = 'https://example.com';
build() { Column() { WebView(this.url) .width('100%') .height('100%') } .alignItems(Alignment.Center) .justifyContent(Alignment.Center) }}
复制代码

(四)从鸿蒙 Next 项目跳转到 WebView 页面

在鸿蒙 Next 的主页面或其他地方,可以通过 router 模块跳转到 WebView 页面:


import { router } from '@ohos.router';
router.push({ url: 'pages/WebViewPage' });
复制代码

(五)适配不同机型

在鸿蒙 Next 中,可以通过动态获取屏幕尺寸来适配不同机型:


import { getScreenSize } from '@ohos.screen';
const { width, height } = getScreenSize();
WebView(this.url) .width(width) .height(height)
复制代码

(六)从 WebView 返回携带参数

在鸿蒙 Next 中,可以通过 evaluateJavascript 方法在 WebView 中执行 JavaScript,并将结果返回到 Flutter 页面:


const result = await webView.evaluateJavascript('someFunction()');router.back({ result });
复制代码


在 Flutter 中接收参数:


final result = await Navigator.push(  context,  MaterialPageRoute(    builder: (context) => WebViewPage(url: 'https://your-url.com'),  ),);if (result != null) {  print(result);}
复制代码



三、总结

通过上述步骤,你可以在 Flutter 和鸿蒙 Next 中实现 WebView 的基础功能,包括页面跳转、显示、适配以及反向跳转等问题。WebView 的实现不仅丰富了应用的功能,也提升了用户体验。希望本文能帮助你更好地理解和实现 WebView 功能。如果有任何问题或需要进一步的帮助,欢迎随时交流!

用户头像

淼.

关注

还未添加个人签名 2022-10-24 加入

还未添加个人简介

评论

发布
暂无评论
Flutter & 鸿蒙 Next 中如何实现 WebView【跳、显、适、反】等一些基础问题_淼._InfoQ写作社区