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

我有一个类似的问题，我希望VStack在屏幕顶部对齐其内容，并且仅在父级中使用NavigationView，但VStack显示居中。对我来说固定的是使用Spacer（），如下所示：

predictors2 = train[['apparent_temperature', 'humidity', 'visibility']]
response = train['temperature']

lr2 = LinearRegression(normalize=True)
lr2.fit(predictors2, response)
y_pred2 = lr2.predict(response)

Answer 2

我遇到了同样的问题，但是发现我在多次使用NavigationView时遇到的问题。

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

因此，请检查您是否在代码中多次使用了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 3

要使其在预览中的导航项（即使对于子视图）中也能正确显示，则需要将视图包装到NavigationView { }中，因为Canvas是一个空的干净环境，并且它不知道该视图可能会被推入NavigationView
要在iPhone上修复它，请确保您正确推动了子视图。应该是NavigationButton(destination: 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)
        }
      }
    }

Answer 4

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

要修复此问题，请从NavigationView中解开VStack，只需从子视图中删除此NavigationView。

Answer 5

 ScrollView(.vertical){
   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"))
}

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

5 个答案: