Ios SWIFTUI视图是在中间而不是在顶部

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

我试图将填充设置为-150，但是文本字段对触摸没有响应

VStack{
文本（“名称：”）
.padding（.bottom，1）
TextField（$name）
.padding（.水平，25.0）
.textFieldStyle（.roundedBorder）
.框架（最大宽度：500）
文本（“图像：”）
.padding（.top，1）
图像（uiImage:Image！）
.reshable（capInsets:EdgeInsets（），resizingMode:.stretch）
.scaledofit（）
.框架（宽度：250，高度：250）
.clipShape（圆角半径：10））
.padding（.top，5）
按钮（操作：{
动画片{
self.showImagePicker=true
}
}) {
文本（“选择图像”）
.color（.init（红色：20/255，绿色：146/255，蓝色：81/255））
}
按钮（操作：{
let list=LSList（标题：self.name，
形象：自我形象！，
id:0）
list.add（）
self.userData.listsData.append（列表）
}) {
文本（“添加列表”）
.颜色（.白色）
.font（.system（大小：25））
.bold（）
.padding（.卧式，7）
.框架（高度：35）
.背景（颜色.绿色）
.clipShape（圆角半径：3））
}
垫片（）
}.navigationBarTitle（文本（“添加列表”））

预览中的视图：

我的iPhone上的视图：

要使预览中的导航项正确可见（即使对于子视图），您需要将视图包装到

NavigationView{}

，因为画布是一个空的干净环境，它不知道视图可能会被推入

NavigationView

若要在iPhone上修复此问题，请确保正确推送子视图。它应该是

NavigationButton（目的地：AddList（））{}

RowView实现的示例：

   NavigationButton(destination: CarDetail(car: car)) {
      HStack {
        VStack(alignment: .leading) {
          Text(car.name)
          Text(car.isAvailable ? "Is Available" : "Out of stock")
            .font(.subheadline)
            .foregroundColor(.secondary)
        }
      }
    }

---

假设您的

VStack

被包装在

NavigationView

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

---

要修复它，请从

NavigationView

中打开VStack，然后从子视图中删除此NavigationView

我也有同样的问题，但发现问题在于多次使用navigationView

我认为我们应该在每个视图中都有NavigationView，但显然，我们应该只在应用程序的主视图中放置NavigationView，并且通过navigationLink输入的所有其他视图都会自动获得back选项，而无需再次提及NavigationView

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

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

另一件事是使用间隔垫圈（）。 如果您希望所有项目都位于顶部，只需将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)

---

我有一个类似的问题，我想要一个VStack将其内容对齐到屏幕顶部，并且只在父级中使用NavigationView，但是VStack显示为居中。对我来说，修复它的方法是使用一个垫片（），如下所示：

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

VStack（对齐：。前导，间距：10）{
HStack（对齐：中心，间距：5.0）{
...
}
团体{
...
}
Spacer（）//您的VStack是否包装在NavigationView中？@MoRezaFarahani YesIt在
NavigationView{}
中，列表中的NavigationButton:
NavigationButton（目的地：AddList（）.environmentObject（self.userData））{Text（“添加列表”）}
我试图将其从VStack中删除，但没有任何更改。我将堆栈的背景更改为蓝色，以查看其高度是否正常，事情就是这样：@Shahar导航条问题已在您的屏幕截图中修复！已修复到顶部。问题可能出在VStack中。我将更新我的帖子。@Shahar删除任何额外的padding/您添加的偏移量。只需尝试您在问题中提供的代码。它对我来说运行良好！如果您不想删除
导航视图
，可以将
.navigationBarHidden设置为（true）
在
VStack
上。您好，我的代码中有navigationLink，它正在工作，您能分享您的代码吗？噢，天哪，谢谢。我也遇到过同样的问题，子视图是导航视图。我没有找到任何文档说您应该只使用堆栈顶部的navigation视图，但它看起来确实很好ke这是必需的。这应该是SwiftUI添加VStack（aligment:.leading）{Spacer（）}并添加Spacer（）作为VStack中的最后一个元素的公认答案。谢谢@Juan Ricardo。我没有提到（对齐：.leading）因为这实际上取决于开发人员希望与之对齐的内容，因此与.center对齐也可以是一个有效的解决方案，这取决于需要。您能否详细说明并向OP解释您的代码工作/应该工作的原因？
    VStack(alignment: .leading, spacing: 10){
        HStack(alignment: .center, spacing: 5.0) {
            ...
        }
        Group{
            ...
        }
        Spacer() //<-- This solved my problem
   }