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中的第一个“空格键”和“按钮”之间添加一个Text对象，则屏幕将按我的预期渲染

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

关于它为什么表现出来的原因以及为什么文本使它以我喜欢的方式起作用的任何想法？

Answer 1

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

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

其他消除歧义的方法是（选择任何一种，而不是全部）

设置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的高度。
删除至少一张图像中的resizable（）修饰符。

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

所有这些替代方法都针对同一件事，确保您的图像知道增长/缩小的程度。当然，还有许多其他选择。这些只是几个。

SwiftUI的间距问题

1 个答案: