swiftui - SwiftUI 的间距问题

Question

我遇到了一种奇怪的间距行为，希望有人能解释一下。我有两个 View ，主视图(ContentView)包含一个名为 PlayerToolbar 的 subview 。所需的行为是 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)
            }
...

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

Answer 1

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

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

打破歧义的其他解决方案是(选择任何一个，而不是全部):

1. 设置 PlayerToolbar 的框架高度:

    PlayerToolBar().frame(height: 40)

至少设置一张图片的高度:

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

将高度设置为其中一个按钮:

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

在 PlayerToolbar 中设置 HStack 的高度。

删除至少一张图像中的 ressized() 修饰符。

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

所有这些替代方案都旨在实现同一目标，即确保您的图像知道要放大/缩小多少。当然还有很多其他选择。这些只是其中的一些。