SwiftUI的间距问题

我正在经历一种奇怪的间隔行为，我希望有人能解释。我有两个视图，主视图（ContentView）包含一个名为PlayerToolbar的子视图。所需的行为是ContentView占据整个屏幕，PlayerToolbar在屏幕的最底部呈现。PlayerToolbar包含图像按钮和间隔符。我遇到的问题是ContentView只占据了屏幕的一部分，而PlayerToolbar没有如图所示与底部对齐

下面是ContentView的代码

struct ContentView: View {
    var body: some View {
        VStack{
            Spacer()
            Text("Main Content")
            Spacer()
            PlayerToolBar()
            }.background(Color.blue)
    }
}

以下是PlayerToolbar的代码：

struct PlayerToolBar: View {

    var body: some View {   
        HStack{
            Spacer()
            Button(action: {
                print("backward button pressed")
            }){
                Image(systemName: "gobackward.10").renderingMode(.original) .resizable().aspectRatio(contentMode: .fit)
            }
            Spacer()

            Button(action: {
                print("play button pressed")
            }){
                Image(systemName: "play.circle").renderingMode(.original) .resizable().aspectRatio(contentMode: .fit)
            }
            Spacer()

            Button(action: {
                print("go forward button pressed")
            }){
                Image(systemName: "goforward.10").renderingMode(.original) .resizable().aspectRatio(contentMode: .fit)
            }
            Spacer()

            Button(action: {
                print("jot button pressed")
            }){
                Image(systemName: "pencil.circle").renderingMode(.original) .resizable().aspectRatio(contentMode: .fit)
            }
            Spacer()
        }.background(Color(UIColor.secondarySystemBackground))
    }
}

我发现，如果在我的PlayerToolbar中的第一个间隔符和按钮之间添加一个文本对象，屏幕就会呈现出我所期望的效果

...
            Spacer()
            Text(" ")
            Button(action: {
                print("backward button pressed")
            }){
                Image(systemName: "gobackward.10").renderingMode(.original) .resizable().aspectRatio(contentMode: .fit)
            }
...

---

你知道为什么它会这样，为什么一个文本会让它按照我喜欢的方式运行吗？

我认为，问题在于你的PlayerToolbar没有高度，布局逻辑很难确定高度。PlayerToolbar中没有明确的高度。您的图像可以调整大小，但视图中没有任何内容告诉您如何调整它们的大小

通过添加一个Text（）视图，您的图像现在有了一些高度可以匹配，因此它可以按照您的预期工作

打破歧义的其他解决方案有（选择任何，而不是全部）：

为PlayerToolbar设置帧高度：

PlayerToolBar（）.框架（高度：40）

设置至少一幅图像的高度：

Image（系统名：“gobackward.10”）
.renderingMode（.original）
.可调整大小（）
.框架（高度：40）
.aspectRatio（内容模式：.fit）

将高度设置为一个按钮：

按钮（操作：{
打印（“按下后退按钮”）
}){
图像（系统名称：“gobackward.10”）
.renderingMode（.original）
.可调整大小（）
.aspectRatio（内容模式：.fit）
}.框架（高度：40）

在PlayerToolbar中设置HStack的高度

在至少一个图像中删除Resizeable（）修饰符

Image（systemName:“pencil.circle”）.renderingMode（.original）.aspectRatio（contentMode:.fit）

---

所有这些备选方案的目标都是相同的，确保您的图像知道要增长/收缩多少。当然还有很多其他选择。这些只是少数。

想得快吗？我看不出你在哪里用

ZStack

尝试过任何东西。这样的事对你有什么好处？记住-嵌套堆栈。。。一个“Z”，三个“V”，每个有两个“H”，仍然意味着层次结构中的一个视图。非常感谢您的回复！