添加多图层下的安全边距
在构建类似多图层的应用时,我们可能需要确保所有内容均在背景层的安全区域内部,因此需要为背景层添加安全边距 —— 类似于 Canva 或 Figma 中的效果。
类似于下面这样的效果:
* 设置背景层横向、纵向的 Padding
* 确保子组件内容不超出 Padding
使用 SwiftUI 实现的方式非常简单:
* 创建一个 VStack(或者使用 Group),在 VStack 上添加 Padding。不使用 ZStack。
* 如果要修改背景颜色,在 VStack 上使用 .background 进行填充。
需要特别注意的是,在 iOS 平台,可以使用固定的 Padding。但是在 Mac 平台上,因为窗口是动态变化的,因此推荐基于窗口宽度、高度动态计算 Padding,例如:
.padding(
.vertical,