Ios SwiftUI内容视图随机填充

我目前正在为我的应用程序创建一个内容视图，并且在填充时遇到了一些奇怪的行为。如下图所示，手机顶部的导航栏下方有相当大的空间。我没有在这里指定任何填充，所以我想知道为什么在顶部和显示图像的位置之间有这么大的空间。图像周围也没有那么大的白色框

我的代码没有指定任何类型的边距或填充。我是Swift和SwiftUI新手，所以我很好奇是否有一些自动填充应用于导航视图

import Kingfisher

struct BottleView: View {
    let bottle: Bottle

    var body: some View {
        VStack {
            KFImage(URL(string: bottle.image ?? "")!)
             .resizable()
            .frame(width: 128, height: 256)

            VStack(alignment: .leading) {
                HStack {
                    Text(bottle.name)
                        .font(.title)
                    Spacer()
                    Text("Price")
                }

                HStack {
                    Text(bottle.varietal ?? "")
                    Spacer()
                    Text("$\(bottle.price ?? "")")
                }
                .font(.subheadline)
                .foregroundColor(.secondary)

                VStack(alignment: .leading) {
                    Text("Information")
                        .font(.title2)
                    Text(bottle.information ?? "")
                }
            }
        }
    }
}

---

如果将

.background（Color.red）

应用于VStack，您将看到它位于屏幕中央

var body: some View {
    VStack {
        Image("TestImage")
        .resizable()
        .frame(width: 128, height: 256)

        /// ... more code
    }
    .background(Color.red)
}

这是因为默认情况下，大多数SwiftUI视图都居中。例如，只尝试一个

文本

：

struct ContentView: View {
    var body: some View {
        Text("Hello, I'm centered!")
    }
}

所以如果你不想让它居中，这就是

Spacer

s的用武之地。这些视图将展开以填充所有可用空间，并推送所有其他视图。以下代码消除了“手机顶部导航栏下方的一点空间”：

（注意，我用静态文本替换了您的

瓶子

属性，请确保将它们更改回原来的状态）

结果:

struct BottleView: View {
//    let bottle: Bottle
    
    var body: some View {
        VStack {
            Image("TestImage")
                .resizable()
                .frame(width: 128, height: 256)
            
            VStack(alignment: .leading) {
                HStack {
                    Text("Blantons")
                        .font(.title)
                    Spacer()
                    Text("Price")
                }
                
                HStack {
                    Text("Bourbon")
                    Spacer()
                    Text("$59.99")
                }
                .font(.subheadline)
                .foregroundColor(.secondary)

                VStack(alignment: .leading) {
                    Text("Information")
                        .font(.title2)
                    Text("Product info here")
                }
            }
            
            Spacer() /// spacer right here! pushes the other views up
        }
        .background(Color.red)
        .navigationBarTitleDisplayMode(.inline) /// get rid of the additional top gap that the default Large Title navigation bar produces
    }
}