我是SwiftUI的初学者,我对.Frame()修饰符有一些误解.

我想创建一个右对齐的图像,所以我这样做:

Image(systemName: "xmark")
  .frame(maxWidth: .infinity, alignment: .leading)
  .padding(5)
  .background(.gray)
  .mask(Circle())
  .padding()

但这张图片出现在我屏幕的中央.我将我的代码更改为:

Image(systemName: "xmark")
  .padding(5)
  .background(.gray)
  .mask(Circle())
  .frame(maxWidth: .infinity, alignment: .leading)
  .padding()

它以我想要的方式工作,但我很困惑为什么这段代码能工作.有人能给我解释一下为什么这段代码能用而前一段不行吗?

我还看到人们会这样写代码:

VStack {
  ...
}
.padding()
.frame(maxWidth: 200)
.frame(maxWidth: .infinity, alignment: .leading)

这说得通吗?我们不是在用第二个.Frame()修饰符重新定义MaxWidth吗?

推荐答案

是的,.frame()修饰符的位置会影响SwiftUI中的视图布局.

在您的第一个示例中,.frame(maxWidth: .infinity, alignment: .leading)在其他布局修改器(如.padding(5), .background(.gray), .mask(Circle()))之前apply.因此,它设置图像的初始位置和大小,并将其他布局修饰符应用于该框架的顶部.由于对齐设置为.leading,因此图像与前缘对齐,但对齐相对于由第一个.frame()修改器设置的帧,即整个屏幕.

在您的第二个示例中,在其他布局修改器之后应用.frame(maxWidth: .infinity, alignment: .leading).其他布局修改器已经设置了图像的位置和大小,第二个.frame(maxWidth: .infinity, alignment: .leading)根据对齐和maxWidth修改边框,在这种情况下,它使边框对齐到行距,并占据整个屏幕的宽度.

关于第三个例子,yes,它是有意义的.第一个.frame(maxWidth: 200)VStack的宽度设置为200,但第二个.frame(maxWidth: .infinity, alignment: .leading)覆盖由第一帧设置的maxWidth,并将VStack与行距对齐,并占据屏幕的整个宽度.

重要的是要注意,布局修饰符的顺序在SwiftUI中很重要,它可能会影响视图的最终布局.同样重要的是,您可以使用多个帧修改器来实现不同的效果.

Ios相关问答推荐

无法在fastlane和github操作中从react-native 应用程序构建ios

SwiftUI SF Symbols图像:暗模式图像

无法关闭包含字体 Select 器的工作表

iOS应用启动时崩溃问题解决方法-NO_CRASH_STACK-DYLD 4个符号丢失

应用程序被杀死时如何在 flutter ios 应用程序中播放音频?

iOS按钮和navigationLink在List中相邻

如何从 Locale Swift 获取货币符号

如何在字段包含字典数组的firestore上查询?

SignalR 永远不会在 iOS 上使用 Xamarin Forms 启动

将图像保存到 Documents 目录并检索邮箱附件

通过 segue 传递数据

Swift 将 unix 时间转换为日期和时间

呈现和关闭模态视图控制器

如何关闭 iOS 键盘?

iOS:如何从 URL 调试新启动应用程序

由于 GoogleSignIn、AdMob 提交应用程序时 iOS 10 GM 发布错误应用程序try 在没有使用说明的情况下访问隐私敏感数据

如何使用 AFNetworking 设置超时

更新字段时,UITextField值已更改未触发

以编程方式确定 iPhone 是否越狱

UITableView 中的圆形 UIImageView 没有性能影响?