英文:
VStack with ignoresSafeArea modifier is not centered in ContentView
问题
我有一个关于使用ignoresSafeArea修饰符的VStack的布局问题。
这是我的代码：
struct ContentView: View {
var body: some View {
VStack {
Color.green
.frame(width: 300, height: 759)
}
.border(Color.blue, width: 2)
.ignoresSafeArea()
}
}
我使用iPhone 14 Pro(iOS 16.4)进行调试。安全区域的默认高度为(852 - 59 - 34) = 759。当绿色视图的高度小于759时，一切都正常。但是当高度 >= 759 时，VStack不再居中于ContentView中。
这是当绿色视图高度为758时的屏幕截图：
这是当绿色视图高度为759时的屏幕截图：
为什么当VStack的高度大于默认安全区域的高度时，它会顶部对齐？
谢谢！
英文:
I have a layout question for using VStack with ignoresSafeArea modifier.
This is my code:
struct ContentView: View {
var body: some View {
VStack{
Color.green
.frame(width: 300,height: 759)
}
.border(Color.blue,width: 2)
.ignoresSafeArea()
}
}
I used iPhone 14 Pro(iOS 16.4) to debug. The default height of safe area is (852 -59 -34) = 759. Everything seems to be fine when the height of green view is smaller than 759.But when the height >= 759, the VStack is no longer centered in ContentView.
This is the screen shot when the height of green view is 758:
This is the screen shot when the height of green view is 759:
Why the VStack is top aligned when its height is bigger than the height of default safe area ?
Thanks!
答案1
得分: 0
在任何情况下都不会居中，只有当您没有使用 ignoresSafeArea 时，绿色框架会与安全区域顶部对齐，而使用 ignoresSafeArea 时，它会与屏幕顶部对齐。这在您自己的截图上可见：如果顶部截图的内容居中对齐，它会看起来像这样：
但是在您的截图上，从顶部到底部的间距要大于从底部到顶部的间距，并且与安全区域成比例。
现在您说：“当绿色视图的高度小于759时，一切都看起来都很好”，但事实是底部和顶部安全区域之间的差异非常小，大多数情况下，您不会注意到内容与顶部相比略微远离底部。但是的确如此。例如，如果将您的 VStack 设置为300像素，您将从顶部获得290像素，从底部获得265像素（恰好是 59 - 34 的差异）。
因此，如果您真的想要将内容居中对齐，请创建一个占据整个屏幕，包括安全区域的容器，然后将其他内容放入其中：
ZStack {
VStack {
Color.green
.frame(width: 300, height: 759)
}
.border(Color.blue, width: 2)
}
.ignoresSafeArea() // 扩展到整个屏幕
.frame(maxHeight: .infinity) // 最大化高度
英文:
It doesn't align to the center in either case, it's just when you don't have ignoresSafeArea the green frame aligns to top of the safe area, and with ignoresSafeArea, it's top of the screen. This is visible on your own screenshot: if top screenshot had content aligned to the middle, it would look like this:
but instead on your screenshot, the gap from the top is larger than the gap from the bottom, and is proportionate to safe area.
Now you say that "Everything seems to be fine when the height of green view is smaller than 759", but truth is the difference between bottom and top safe area is so small, that most of the time you won't notice that the content is slightly further from top than from the bottom. But it is. For example if you set your VStack to 300px, you will get 290px from the top, and 265 from the bottom (exactly the difference 59 -34.
So if you really want to align your content to the middle, have a container that extends to the whole screen, including safe area, and then place your other content into it:
ZStack {
VStack {
Color.green
.frame(width: 300, height: 759)
}
.border(Color.blue, width: 2)
}
.ignoresSafeArea() // <-- extend to the whole screen
.frame(maxHeight: .infinity) // <-- maximize the height
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论