Flutter项目中添加Webview（八）使用JavaScript渠道

最新推荐文章于 2025-05-26 14:36:27 发布

蚂蚁二娘

最新推荐文章于 2025-05-26 14:36:27 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

文章标签： flutter javascript android

本文链接：https://blog.csdn.net/web2022050901/article/details/128563199

本文介绍了在Flutter项目中如何使用JavaScript渠道与WebView进行交互，通过注册回调处理程序，实现在JavaScript上下文和Dart代码间传递值。详细展示了在WebView中执行JavaScript代码并获取返回结果的步骤，同时还提供了JavaScript Channel Example，展示如何获取设备IP地址。最后，分享了75个JavaScript面试题，帮助开发者准备面试。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

借助JavascriptChannel，您的应用可以在WebView的JavaScript上下文中注册回调处理程序，可以调用这些回调处理程序将值传递回应用的Dart代码。在此步骤中，您将注册一个使用 SMLHttpRequest的结果调用SnackBar。

将WebViewStack类更新如下所示：

class WebViewStack extends StatefulWidget {const WebViewStack({required this.controller, Key? key}) : super(key: key);final Completer<WebViewController> controller;@overrideState<WebViewStack> createState() => _WebViewStackState();
}

class _WebViewStackState extends State<WebViewStack> {var loadingPercentage = 0;@overrideWidget build(BuildContext context) {return Stack(children: [WebView(initialUrl: 'https://flutter.dev',onWebViewCreated: (webViewController) {widget.controller.complete(webViewController);},onPageStarted: (url) {setState(() {loadingPercentage = 0;});},onProgress: (progress) {setState(() {loadingPercentage = progress;});},onPageFinished: (url) {setState(() {loadingPercentage = 100;});},navigationDelegate: (navigation) {final host = Uri.