flutter webview 在iOS上不显示的问题

最新推荐文章于 2025-03-14 08:30:00 发布
原创 最新推荐文章于 2025-03-14 08:30:00 发布 · 3.2k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#flutter #webview #app

本文介绍了解决Flutter WebView插件在iOS设备上不显示的问题，通过在info.plist中添加必要的配置，确保WebView在iOS端正常运行。

使用的插件是：

webview_flutter: 0.3.22+1

在android中可以正常显示，但是在ios端中既没有报错，又没有显示出来，后来查看插件使用说明才发现，忘记在ios端中端配置文件中进行配置了。

此时我们需要在ios的runner中的info.plist中进行配置：

	<key>io.flutter.embedded_views_preview</key>
	<string>YES</string>

如下图：
在这里插入图片描述

更多：

如何写一个自己的小程序并上线

Github搭建个人博客（2019最新版,亲测）
徐代龙的技术博客

苹果公司开发者账号申请流程
邓邓子的博客
06-25 2万+
在等待审核过程中会收到一封邮件（如果一直收不到邮件，一定要联系客服说明情况。点击邮件中的 “通过我们的网站联系我们”，客服很快就会打电话过来核实相关情况，然后审核就通过了。用苹果手机下载 Apple Developer app，用注册好的 Apple ID 登录。若没有，返回至最开始填写信息的页面，提交信息，然后等待邮件。大约 1 天后会收到邮件。法人实体名称示例：Chaoyue Software Co., Ltd.在 “设置” 中设置一下地区即可。
苹果开发者账号注册方法简明指南
2301_79192895的博客
08-21 1507
如果您需要使用组织的信用卡，请在设备设置的“iTunes Store 与 App Store”部分中 (在 iOS 14 中，则为“媒体与购买项目”部分)，将该信用卡添加到所登录的 Apple ID。如果您就职于中国大陆境内的公司、非营利组织、合资企业、合伙企业或政府组织，可按照以下步骤，在 iPhone 或 iPad 上注册 Apple Developer Program。输入您的名字、姓氏、身份证号和电话号码。请勿输入别名、昵称或公司名称作为您的姓氏或名字，错误地输入您的法定姓名将导致注册审核延误。
flutter 获取当前时分
徐代龙的技术专栏
08-15 1167
代码如下： static bool checkTimer() { DateTime now = new DateTime.now(); var h = now.hour; if(9<=h && h<=12){ return true; }else if(13 <= h && h <= 15){ return true; } return false; } 更多： 如何写
Apple Developer 个人开发者账号申请流程
热门推荐
Light
04-15 7万+
Apple Developer 个人开发者账号申请流程
flutter webview 一直黑屏以及js调用失败.pdf
12-16
综上所述，解决Flutter Webview的黑屏和JavaScript调用失败问题，关键在于正确初始化Webview，确保JavaScript桥接的可用性，以及在适当的时间执行JavaScript代码。通过排查上述各个层面的问题，通常能够找到并解决...
Flutter WebView加载HTTP页面不显示？这个方法让你轻松解决
我码玄黄的博客
08-18 941
Flutter WebView加载HTTP地址时出现白屏？通过修改Android的network_security_config.xml和iOS的Info.plist配置，可解决此问题。但请注意，这可能降低应用安全性，推荐使用HTTPS。
Flutter项目webview加载没有HTTPS证书的网页在Android和iOS设备上无法显示的解决方案
he先森的博客
05-21 3901
Flutter项目使用谷歌官方webview库 webview_flutter，加载自签名证书、证书失效、无证书等HTTPS网页地址时，在Android或pc浏览器中提示证书失效，在iOS设备上为空白页，为了加载自签名证书的网页，需要饶过iOS上的webview控件HTTPS证书校验。
Flutter webview-flutter 问题
最新发布
05-16
这意味着在使用webview_flutter时，开发者需要确保他们的应用在各个平台上有正确的配置，包括但不限于Android的WebView配置和iOS的WKWebView配置。不同的平台可能会有不同的安全设置、权限需求和限制，这些都是需要...
iOS、Android图标生成网站
qq_37203361的博客
11-14 688
图标生成https://www.appicon.co/
如何申请苹果开发者个人账号
cuckoomin的博客
05-22 2148
填写账号信息，包括邮箱、密码、姓名（要写拼音，先写名字再写姓，拼音首字母大写，如果名字是两个字的，第二个不需要大写，紧挨着第一个字的拼音即可）；生日：当鼠标单击在生日处的时候，会出现要求的格式【年/月/日】点击【立即创建您的 Apple ID 】 因为浏览器的原因，因为现在大部分浏览器都会自动把申请页英文翻译成中文，下图就是中文版的样式——4、信息填写完毕后，苹果会给你注册的邮箱发送一封邮件，将上面的验证码输入到该页面即完成了苹果账号的注册。登入进账户以后，联络方式只有邮箱，点击【编辑/Edit】
android在线图标生成工具,图标在线生成工具Android Asset Studio的使用
weixin_39576149的博客
05-25 1567
在网站的导航资源里看到了一个非常好用的东西：Android Asset Studio，可以在线生成各种图标。之前一直在用一个叫做Android Icon Creator的插件，可以直接在Android Studio的插件里搜索，这个工具的优点是可以生成适应各种分辨率的一套图标，有好几种风格的图标资源，遗憾的是虽然有很多套图标风格，毕竟是有限的。Android Asset Studio可以自己选择其...
@async 默认线程池_深入理解 Flutter 多线程 | 开发者说DTalk
weixin_39630466的博客
11-21 395
本文原作者: 刘小壮，原文发布于搜狐技术产品(sohu-tech)导读从18年底Flutter1.0正式版发布以来，在国内出现了爆发式增长，包括闲鱼、抖音、今日头条在内的大多数公司，相继接入了Flutter，通过Flutter进行跨平台开发。在使用Flutter的过程中，我们也需要对其一些特性进行研究和掌握，如果只是调用API的话并不能领悟到Flutter的精髓。本篇文章详细讲解了Fl...
注册苹果个人开发者账号
佛系又执着的技术学习者
12-26 801
1. 创建苹果账号（Apple ID）步骤省略，如果已经拥有Apple ID ，可以直接使用（建议AppleID是用邮箱创建的）2. 用iPhone或iPad，下载安装Apple Developer app，选择账户登录Apple ID，现在注册。4. 订阅会员成功后，记得查看邮箱信息，根据邮箱提示提供所需资料文件。信息填写注意事项：建议与提供的身份证信息保持一致。最后苹果个人开发者账号就注册成功可以使用啦！3. 点击继续根据提示进行人脸识别等操作。
在线生成android ios icon,一键生成Android/Android-HD/IOS 多尺寸ICON
weixin_39559523的博客
05-28 1682
ICON一般都会有很多个尺寸，如果一个个尺寸去弄会很浪费时间，所以就写了个小工具，一键生成Android/Android-HD/IOS 多尺寸ICON，下面就将方法分享给大家。工具下载地址：http://download.csdn.net/detail/cp790621656/9873029源码地址：https://github.com/ThisisGame/MultiSizeIcon主要代码如下...
2024苹果开发者账户注册（包含邓白氏编码注册流程）
qq156831414的博客
08-27 2万+
2024苹果开发者账户注册（包含邓白氏编码注册流程） 申请苹果证书和描述文件的前提是具备Apple Developer开发者账号，在此跟大家分享一下账户的申请流程。 注册个人开发者不需要邓白氏编码，但注册公司或者企业的就需要邓白氏编码，下面会讲解邓白氏编码注册流程；
苹果开发者账号申请教程
weixin_40581617的博客
05-11 1227
只有苹果开发者账号才能上架App Store，苹果开发者需要年费，是苹果公司收的！公司、政府和企业账号申请比较复杂，如果不想麻烦，或没有visa银行卡，可以联系他们技术代申请如果只是安装ios应用到自己手机测试，现在只需要注册一个普通的苹果账号就行了。我有几张阿里云幸运券分享给你，用券购买或者升级阿里云相应产品会有特惠惊喜哦！把想要买的产品的幸运券都领走吧！快下手，马上就要抢光了。这里介绍个人开发...
Apple 开发者账号注册流程：详细图文教程
moton2017的博客
03-14 1万+
以下是2025年最新版Apple Developer企业开发者账号注册的完整流程及关键注意事项，结合了苹果官方政策与实操经验总结
Flutter 获取当前时间
丿灬安之若死
04-08 7876
DateTime dateTime= DateTime.now(); 2021-04-08 11:48:24.933164 更多详细信息可以通过SubString截取 或者是通过下面方法直接获取 dateTime.day dateTime.month dateTime.year dateTime.hour dateTime.minute dateTime.second dateTime.millisecond dateTime.millisecondsSinceEpoch ...
flutter webview 在ios 点击失效 flutter层有弹窗
03-20
<think>好的，我现在要解决用户在Flutter中使用WebView时，iOS平台上点击失效的问题，尤其是在有弹窗的情况下。首先，我需要理解问题的具体情况。用户提到当存在弹窗时，WebView的点击无法正常工作，这可能涉及到事件处理或焦点管理的问题。 首先，我回忆一下在Flutter中处理弹窗的常见方法。通常，弹窗（如AlertDialog或自定义的Modal）会覆盖在WebView之上。这时候，如果弹窗没有正确处理触摸事件，可能会导致事件被拦截，无法传递到下层，尤其是WebView所在的层级。在iOS上，可能存在不同的行为，特别是在WebView和Flutter的Widget层之间的交互。 接下来，我需要检查用户提供的引用内容，特别是引用[3]中提到的关于阻止事件冒泡的方法。那里提到使用GestureDetector包裹组件，并通过onTap回调来阻止事件冒泡。例如，父组件处理点击事件后，子组件的事件可能不会继续传递，从而避免冒泡。这可能与当前问题相关，因为如果弹窗的GestureDetector没有正确配置，可能会意外阻止WebView的点击事件。 另外，引用[1]中的代码展示了如何通过监听popupVisible变量来控制触摸事件的默认行为。当弹窗显示时，阻止了body的touchmove事件，这可能影响了事件传递。在Flutter中，类似的机制可能存在，例如通过Listener或GestureDetector来拦截事件，但需要确保不会影响到WebView的正常交互。 接下来，我需要考虑Flutter WebView的具体实现。如果使用的是官方提供的webview_flutter插件，可能需要检查其事件处理机制。在iOS平台上，WebView可能作为原生组件嵌入到Flutter的UI中，事件传递可能会有不同的处理方式。当弹窗显示时，可能会改变视图层级，导致WebView无法接收到触摸事件。 可能的解决方向包括： 1. **确保弹窗正确关闭或隐藏时恢复事件传递**：当弹窗显示时，是否错误地禁用了WebView所在区域的事件监听？需要检查弹窗的配置，例如barrierDismissible属性是否允许点击外部关闭弹窗，以及是否意外拦截了事件。 2. **调整弹窗的布局和行为**：弹窗可能覆盖了整个屏幕，导致WebView无法接收点击。可以尝试将弹窗设置为非全屏，或者调整其位置，避免覆盖WebView的可点击区域。不过这可能不适用于所有情况，特别是需要模态弹窗时。 3. **使用GestureDetector阻止事件冒泡**：如引用[3]所述，在弹窗的GestureDetector中处理事件，并阻止其继续传递到下层。但需要注意，这可能会影响弹窗自身的点击事件处理，需要确保只在弹窗区域阻止事件传递，而不是整个屏幕。 4. **检查WebView的交互设置**：某些情况下，WebView可能需要特定的配置来允许交互。例如，确认WebView的gestureRecognizers是否允许所有手势，或者是否有其他属性限制了点击事件的响应。 5. **处理平台特定的问题**：由于问题仅出现在iOS上，可能需要检查iOS平台中WebView的事件处理机制。例如，是否存在已知的bug，或者需要特定的配置来确保事件正确传递。 现在，我需要综合这些信息，给出具体的解决步骤。可能的解决方案包括在弹窗显示时调整WebView的可点击状态，或者确保弹窗的事件处理不会干扰到WebView。例如，在弹窗显示时，如果弹窗覆盖在WebView之上，可能需要动态调整WebView的交互性，但这可能比较复杂。 另一个可能性是弹窗的透明背景区域拦截了点击事件。例如，弹窗的barrierColor可能覆盖了整个屏幕，导致WebView无法接收点击。在这种情况下，可以尝试调整barrierColor的属性，使其不拦截事件，但这通常不可行，因为默认情况下，点击barrier区域会关闭弹窗。或者，检查是否错误地添加了额外的GestureDetector在弹窗外部，导致事件被拦截。 此外，参考引用[3]中的阻止事件冒泡的例子，可能在弹窗的内容部分使用GestureDetector来阻止事件冒泡到父组件，这样当点击弹窗内部时，事件不会传递到WebView，但弹窗外部的点击可能仍然可以到达WebView。不过，如果弹窗是全屏的，那么外部点击可能不会存在，此时可能需要确保弹窗本身的点击处理正确，不影响下层组件。 可能的解决方案步骤： 1. **检查弹窗的布局结构**：确认弹窗是否正确放置在Widget树中，是否覆盖了WebView区域。使用布局调试工具查看层级结构。 2. **调整弹窗的事件处理**：在弹窗的Widget周围包裹GestureDetector，并在onTap回调中阻止事件冒泡，但仅限于弹窗内容区域，而不是整个屏障区域。例如： ```dart GestureDetector( onTap: () { // 处理弹窗内部的点击，阻止事件传递到下层 }, child: AlertDialog( // 弹窗内容 ), ) ``` 3. **确认WebView的gestureRecognizers设置**：确保WebView允许所有手势识别。例如： ```dart WebView( gestureRecognizers: Set() ..add(Factory<VerticalDragGestureRecognizer>(() => VerticalDragGestureRecognizer())) ..add(Factory<HorizontalDragGestureRecognizer>(() => HorizontalDragGestureRecognizer())), // 其他参数 ) ``` 4. **处理iOS平台特定配置**：检查是否有iOS特定的设置需要调整，例如在iOS的WebView设置中启用某些交互属性。 5. **测试弹窗显示时的焦点状态**：可能弹窗获取了焦点，导致WebView无法接收事件。尝试在弹窗关闭后主动请求焦点到WebView组件。 经过这些步骤，应该能够定位问题所在，并采取相应的解决措施。例如，如果发现
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值