SwiftUI任意继承层级中视图被裁剪显示不全的解决方案

已于 2025-06-30 13:54:18 修改
阅读量785 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 开发疑难秒懂百科 文章标签： swiftui 裁剪 遮挡 ZStack PreferenceKey
于 2022-08-07 08:51:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mydo/article/details/126191643
本文介绍了在SwiftUI中，如何使用PreferenceKey解决视图因超出边界被裁剪的问题。通过定义PreferenceKey和HotPreferenceData，确保任意继承层级的视图内容完整显示，具体涉及ZStack、PreferenceKey的使用和数据传递。

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

在这里插入图片描述



问题现象

在SwiftUI中，一般来说每个视图会根据其边界自动裁剪子视图的显示内容，这意味着，如果你的视图上有超出其边界显示的内容，它们会被裁剪掉：

在这里插入图片描述

如上图所示，顶部闪烁着的“热卖中！”标签由于超出了其父视图产品图片的边界所以被裁减掉，导致外观显示不完整。

我们有没有办法在不大幅度改动视图继承层级的情况下，让“热卖中！”标签显示完整呢？

答案是肯定的！

只需要稍作更改，我们即可让任意继承层级视图中超出边界的内容完整无缺的显示出来。

Let’s fix it!!! 😃


问题分析

1. 增大Z轴不是万能药

有的童鞋可能认为增大视图的Z轴索引可以让其“自动”显示在其他视图上方，从而避免被“遮挡”：

VStack
了解本专栏 订阅专栏 解锁全文
SwiftUI用Gradient颜色裁剪任意视图
享受开发，颠倒银河
01-28 1405
在SwiftUI开发中对任意形状的视图，如果能打破单一的背景色，而去应用多彩阶梯色(Gradient)的话，那就太赞了。So，在SwiftUI中到底如何实现呢？答案远比你想象的要简单，Let’s Go！
SwiftUI使用MatchedGeometryEffect快速同步不同继承层级中视图的位置和尺寸
享受开发，颠倒银河
08-07 491
在本篇博文中，我们学到了如何用MatchedGeometryEffect机制更简单，更有效率的同步SwiftUI中任何视图之间的大小和位置的方法。
ios swift5 要超出父视图的部分不显示 剪圆角
baidu_40537062的博客
01-24 1717
view.layer.masksToBounds = true 或者 view.layer.cornerRadius = 10; 上面两行代码都会导致阴影无效，如果父视图需要设置阴影，则将上面两行代码用在子视图上
圆角设置后UI显示不出来的问题
vickyjfr的专栏
05-10 939
2021.5.9 遇到的开发问题--圆角设置后UI显示不出来的问题 发现采用iOS自动布局框架-Masonry后，单独设置某个View的圆角后，某个view整个都看不到了，但是在xcode里面查图层的方式查View还是存在的，参数也没有任何异常； 做了好多的测试，发现不使用masonry之后，单个圆角的设置就可以了，这个坑隐藏的比较深，作为记录； 单个或者多个圆角设备代码如下： UIBezierPath* rounded = [UIBezierPath bezierPathWithRoundedRe
剪切图片超出ImageView的超出部分
Jayant_Y的博客
10-12 4030
imgeView.clipstobounds = YES;//设置这个属性为YES就可以了，默认是NO;
SwiftUI图像App开发之载入图片、显示图片、处理图片
iCloudEnd的博客
05-21 3316
本文价值与收获 看完本文后，您将能够作出下面的界面 [email protected] Jietu20200521-214942.gif Jietu20200521-214942.gif 基础知识 #Core Image 图像处理组件 Core Image核心图像是一种图像处理和分析技术，旨在为静止和视频图像提供近乎实时的处理。它使用 GPU...
『第十章』仪态万千的雨燕：UIKit 和 SwiftUI
享受开发，颠倒银河
10-28 518
在本篇博文中，我们先是简要介绍了 UIKit 框架，接着我们详细讨论了 SwiftUI 以及它的重要组件：原生视图、修改器、状态与“真相之源”、动画以及与 UIKit 互动等众多话题。
看完这篇iOS面试题，一天3offer！！！
m0_60543356的博客
09-22 662
前言 不积跬步无以至千里，不积小流无以成江海。学如逆水行舟，不进则退。我是平平无奇游荡于各平台的搬运工。今天给大家讲解很多很多的面试题知识点，一点要坚持看下去，看完就会有收获，就算知道也是复习一遍，为故而知新。废话不多说，希望能对你有所帮助，优秀的人已经点赞了 一C语言相关面试题 1.static有什么用途？ 答案：在C语言中，static主要定义全局静态变量，定义局部静态变量，定义静态函数。 static 属于静态变量，使用它修饰的变量生命周期是整个源程序。 @1.在函数体内的 static 变量的作用
Flutter 笔记 | Flutter Native 插件开发 (Android)
川峰的博客
05-20 2706
BasicMessageChannel、 MethodChannel、 EventChannel是开发者和 Flutter Framework 进行通信的接口，它们的底层通信都是通过 messenger 字段所持有的BinaryMessenger接口来实现的。Platform view 允许将原生视图嵌入到 Flutter 应用中，所以您可以通过 Dart 将变换、裁剪和不透明度等效果应用到原生视图。 Flutter 支持两种集成模式：虚拟显示模式 (Virtual displays) 和混合集成模式 (
swift工程视图界面不要视图层次过多！！！
hccgk的专栏
11-19 237
视图层次过多带来的问题： 1.内存消耗过高 2.视图渲染压力大 3.appium定位不上！！ 好处就是能显示出来，程序设计者用了一堆框架嵌套层次深，写起来容易 ======== 如何凸显一个程序员的优秀 应该是从全局角度出发，虽然前段开发不想后端开发，但是也需要对自己的作品进行优化 ...
使用SwiftUI轻松定制的浮动按钮菜单-Swift开发
05-27
通过SwiftUI创建的可轻松定制的浮动按钮菜单FloatingButton通过SwiftUI创建的可轻松定制的浮动按钮菜单我们是一家开发公司，致力于开发出色的应用程序。 用法创建主按钮视图和许多子菜单按钮-两者都应强制转换为AnyView类型。 将两者都传递给FloatingButton构造函数：FloatingButton（mainButtonView：mainButton，Buttons：按钮）您还可以传递一个绑定，该绑定将确定菜单当前是否处于打开状态。 您可以使用它来关闭任何子菜单按钮上的菜单
在 SwiftUI 中捕获图像裁剪等
iCloudEnd的博客
06-06 381
SwiftUI 中的捕获图像裁剪透视校正。在 iOS 应用程序开发领域，Xcode 和 SwiftUI 彻底改变了开发人员创建直观且具有视觉吸引力的用户界面的方式。SwiftUI 提供了一种构建用户界面的声明式方法，而 Xcode 提供了一套全面的工具和框架。在这篇文章中，我们将探索如何创建一个 SwiftUI 项目来捕获具有高级功能的照片，例如连接到 UIKit、相机照片调整、图像方向到纵向向上、光线控制、缩放控制以及带透视校正的自动边界检测只需几行代码和 Vision.framework。
记录一次子View超出父布局部分被裁减问题引起的measure再思考
weixin_34387468的博客
06-24 833
背景 在项目中做到了一个需求，需要做一个类似于从底部滑出遮挡住的屏幕外的View出来，大概效果图如下： 下面的黄色View开始时是在底部固定位置，下半部分超出屏幕外不可见，随着滑动往上滑出，而且要考虑到不同的设备的屏幕高度问题，每个设备都要只显示到底部文字3这一块内容，那么意味着要在代码中动态设置margin。 提前声明 代码是demo,所以没有对滑动做多余的处理，只是有个简单的滑动效果，本文重...
iOS SwiftUI 中级之视图的剪裁效果《春泉洗药图》
iCloudEnd的博客
02-13 704
iOS SwiftUI 中级之视图的剪裁效果《春泉洗药图》 最终效果 视图的剪裁效果 名画赏析 春泉洗药图 SwiftUI世界里万物皆视图，因此苹果为我们提供了多种方式来改变视图的形状。例如我们可以对视图进行剪切、遮罩、虚化和其他更为复杂的操作。下面我们就一起来学习一下吧 剪裁 有时我们可以frame修饰符来限制视图的大小，但必须允许视图可以缩放，fra...
[IOS][Swift]image 裁剪 调整尺寸
vivianliulu的博客
08-23 2429
image 裁剪 调整尺寸 cgrect的坐标原点在左上角 1 裁剪 func cropImage(_ inputImage: UIImage, toRect cropRect: CGRect, viewWidth: CGFloat, viewHeight: CGFloat) -> UIImage? { let imageViewScale = max(inputImag...
SwiftUI-Day10 类和继承
悉尼没有雪
10-10 562
文章目录吐槽结果构造函数继承override关键字 - 方法重载final关键字 - 无子类对象复制Deinitializers - 析构函数Mutability - 可变性 吐槽 Xcode升级，什么appdelegate都没有了，现在全是swiftUI。。。 下面的代码是playground的代码，不是swiftUI View。 参考资料： https://www.hackingwithswift.com/100/swiftui/10 时间：10 October, 2020 类与结构体有五个不同： 类
解决子视图超出父视图无法响应问题
华仔的博客
04-27 1293
前言 在日常开发过程中，难免都会遇到子控件超过父视图的情况。超出父视图的部分是不能响应点击事件，但是总有些情况需要我们让超出的部分响应点击事件，那么就需要用到convertPoint。 convertPoint相关的方法 转换像素点 // 将像素point由point所在视图转换到目标视图view中，返回在目标视图view中的像素值 - (CGPoint)convertPoint:(CGPoint)point toView:(UIView *)view; // 将像素point从view中转换到当前视
【100天学习SwiftUI】第12天 类、继承和检查点7
最新发布
栗少的博客
03-29 117
这不仅告诉您可以根据需要更改该属性，更重要的是告诉您该属性有可能在其他地方更改 - 您所拥有的类可能是其他地方的副本，并且因为该属性是可变的意味着代码的其他部分可能会出人意料地改变它。当一个类从另一个类（其“父类”或“超级”类）继承功能时，Swift 将授予新类（“子类”或“子类”）对该父类的属性和方法的访问权限，从而允许我们进行小的添加或更改以自定义新类的行为方式。当然，在幕后 Swift 可以做一些优化，这样每次我们只改变它的一部分时，它就不会真正丢弃整个值，但从我们的角度来看，这就是它的处理方式。
SwiftUI最佳实践之告别继承拥抱组合
iCloudEnd的博客
02-03 462
SwiftUI给我们的编程带来巨大便利，用View取代了UIView，用好用的List取代了繁琐的UITablewView,用VStack、HStack、ZStack取代了复杂的autolayout。但是SwiftUI最大意义在于给我们提供了一个新的开发App的解决方案。 在旧世界里，万物皆对象，继承是开发的法宝。在SwiftUI世界里万物皆View，继承成为了二等公民，组合坐...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

大熊猫侯佩

赏点钱让我买杯可乐好吗 ;)

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值