swiftUI避坑之:sheet的失效问题

兔嘟清单

“兔嘟清单”是我独立设计和开发的一个产品,开发“兔嘟清单”过程中有一个困扰了我很多天的bug。鉴于网络上尚未有其他可行的解决方案,现记下。

在“兔嘟清单”的项目任务分组页面下,设计上的逻辑是点击任务卡片,使用.sheet来打开该任务的可编辑详情。然而在某个版本的测试中,点击右上角的“…”打开了一个Menu之后,如果再点击了某个任务卡片,本来应该打开的sheet就会失效,打不开任务详情。

正常情况下应该会收起Menu,打开任务详情的sheet,从底部滑起一个上浮的图层,展示出任务的可编辑界面。

在Menu关闭之后,该页面所有任务卡片都无法点击打开任务详情,页面内所有的.sheet都会失效。这种情况需要返回上一级界面重新进入该界面(页面刷新)之后才会恢复正常。

sheet无法打开

当这个bug发生的时候,Xcode中就会出现以下提示:

sheet失效提示

对于sheet失效的原因,我进行了数十次尝试,才锁定是由于Menu与sheet的冲突所致。上述提示的代码大致意思是:“试图打开一个已经打开的展示图层”。我带着这个问题在网上搜索了所有可能的原因和解决方案,国外某交流网站上的大神给出较为靠谱的解释:这是操作系统层面的一个bug,可以提交到苹果。而且短期内没有解决方案。

后来测试手机升级到iOS17.0之后的版本,这个bug就消失不见了,估计是苹果官方修复了这个bug。然而在iOS16的版本内的手机,这个问题依然是存在的。但是由于iOS17才刚推出不久,iOS16仍然是不可忽视的用户群体,所以我仍然需要研究出一定的方案来解决这个问题。

经过了无数次尝试之后,总算找到了两个可行的解决方案,如下

1、延迟执行.sheet

由于.sheet和Menu都是展示在最上层的浮层,功能上的逻辑应该是:Menu在被打开状态下,如果点击了界面其他元素,应当是先关闭当前的Menu菜单,然后再打开sheet。所以想到它们之间冲突的原因可能是由于一方未能及时关闭就打开另一方所致。所以当我尝试将sheet在界面被点击之后延迟0.25秒之后再执行,然后奇迹地发现sheet可以被正常打开了。代码如下所示

兔嘟清单代码

如此一来,bug就被修复了。然而这种操作的延迟本质上会造成些微交互上“不够流畅”的用户体验,虽然十分微小,用户也未必能够体会到,但卡顿感仍是存在的。如果实在不愿接受这种延迟,可以使用第二种解决方案:

2、使用.popover来代替

当我进行使用popover进行尝试的时候,发现popover与menu并不会冲突,功能一切正常。在手机端的app的界面交互上,popover的呈现方式与sheet是一样的,都是从底部弹起一个外观上一模一样的可拖动浮层,所以如果你开发的是手机端的app,就可以使用popover来代替。如下

兔嘟清单代码

这样在交互上与原来的sheet一致,但popover与sheet并非完全一模一样的,例如在pad端的popover与sheet就不一样,平板端的popover不再是一个占大半屏的浮层,而是一个与在Mac端上一样的,箭头引出的气泡。

所以如果你开发的是多个端的应用,则需要同时考虑这些组件在不同的平台上的交互方式。关于这点,我们之后再进行讨论。

  • 14
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值