SwiftUI 的间距问题

Question

我遇到了一种奇怪的间距行为，希望有人能解释一下。我有两个视图，主视图 (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 和 Button 之间添加一个 Text 对象，屏幕将按预期呈现

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

知道为什么它的行为方式以及为什么 Text 让它按照我喜欢的方式运行吗？

Answer 1

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

通过添加 Text() 视图，您的图像现在可以匹配一些高度，因此它可以按您的预期工作。

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

1. 为 PlayerToolbar 设置框架高度：

    PlayerToolBar().frame(height: 40)

1. 为至少一张图片设置高度：

    Image(systemName: "gobackward.10")
       .renderingMode(.original)
       .resizable()
       .frame(height: 40)
       .aspectRatio(contentMode: .fit)

1. 将高度设置为您的按钮之一：

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

4. 在 PlayerToolbar 中设置 HStack 的高度。

5. 至少删除一张图片中的 resizable() 修饰符。

Image(systemName: "pencil.circle").renderingMode(.original).aspectRatio(contentMode: .fit)

所有这些替代方案都针对同一件事，确保您的图片知道要扩大/缩小多少。当然还有很多其他的选择。这些只是其中的一部分。