SwiftUI 视图位于中间而不是顶部

Question

我正在尝试在 SwiftUI 中创建视图。在预览中，它看起来应该如此，但是在我的 iPhone（或实时预览）上运行时，它看起来像是偏移了。

我试图将填充设置为 -150，但随后 TextField 不响应触摸。

VStack {
    Text("Name:")
        .padding(.bottom, 1)
    TextField($name)
        .padding(.horizontal, 25.0)
        .textFieldStyle(.roundedBorder)
        .frame(maxWidth: 500)
    Text("Image:")
        .padding(.top, 1)
    Image(uiImage: image!)
        .resizable(capInsets: EdgeInsets(), resizingMode: .stretch)
        .scaledToFit()
        .frame(width: 250, height: 250)
        .clipShape(RoundedRectangle(cornerRadius: 10))
        .padding(.top, 5)
    Button(action: {
        withAnimation {
            self.showImagePicker = true
        }
    }) {
        Text("Select Image")
            .color(.init(red: 20/255, green: 146/255, blue: 81/255))
    }
    Button(action: {
        let list = LSList( title: self.name,
                                           image: self.image!,
                                           id: 0)
        list.add()
        self.userData.listsData.append(list)
    }) {
        Text("Add List")
            .color(.white)
            .font(.system(size: 25))
            .bold()
            .padding(.horizontal, 7)
            .frame(height: 35)
            .background(Color.green)
            .clipShape(RoundedRectangle(cornerRadius: 3))
    }
    Spacer()
} .navigationBarTitle(Text("Add List"))

预览中的视图：

我的 iPhone 上的视图：

Answer 1

我遇到了同样的问题，但发现我遇到的问题是多次使用导航视图。

我认为我们应该在每个视图中都有 NavigationView，但显然，我们应该只将 navigationView 放在应用程序的主视图中，而我们通过 navigationLink 进入的所有其他视图，自动获得后退选项，而无需再次提及 NavigationView。

因此，请检查您是否在代码中多次使用 navigationView。

奇怪的是，我们甚至可以在没有提到 navigationView 的视图中指定 navigationBarTitle，这是因为 navigationView 在父视图中。使用“displayMode: .inline”，使导航区域尽可能小，这样可以节省您的空间。

另一件要做的事情是使用 Spacer()。如果你想让你的所有项目都在顶部，只需将 Spacer() 作为 VStack 中的最后一个项目，它就会将所有项目推到顶部。

看这个例子：

VStack {
    // What you care about displaying
    Text("Something to Show 1")
    Text("Something to Show 2")
    Text("Something to Show 3")

    // This should be the last, put everything to the top
    Spacer()             
}
.navigationBarTitle(Text("The Title"), displayMode: .inline)

Answer 2

我有一个类似的问题，我想要一个 VStack 将其内容对齐在屏幕顶部，并且只在父级中使用 NavigationView，但 VStack 显示居中。为我修复的是使用 Spacer()，如下所示：

    VStack(alignment: .leading, spacing: 10){
        HStack(alignment: .center, spacing: 5.0) {
            ...
        }
        Group{
            ...
        }
        Spacer() //<-- This solved my problem
   }

Answer 3

假设您VStack被包裹在 a 中NavigationView，这就是它在模拟器中无法正确呈现的原因。它在预览中显示良好的原因是它没有显示导航栏（也包括后退按钮），因为画布不知道可能会推送此视图，但在运行时，导航栏会在您同时添加也使用额外的 NavigationView。

要修复它，请从NavigationView子视图中解开 VStack并简单地从子视图中删除此 NavigationView。