NavigationItem按钮和Edit模式按钮显示在不同级别

Question

我在父视图的子视图中有一个导航按钮，当我实现编辑按钮时，它显示在不同的位置：

struct DetailsView: View {
@Binding var item: PocketItem
@Environment(.presentationMode) var presentationMode: Binding<PresentationMode>
@Environment(.editMode) var editMode

var body: some View {
NavigationView {
Form {
TextField("Placeholder", text: $item.name)
.disabled(.inactive == self.editMode?.wrappedValue)
// .textFieldStyle(RoundedBorderTextFieldStyle())
.foregroundColor((.active == self.editMode?.wrappedValue) ? Color.black : Color.gray)
}
.navigationBarTitle(.inactive == self.editMode?.wrappedValue ? "(pocketItem.name) Details" : "Edit Pocket", displayMode: .inline)
.navigationBarItems(
trailing: Button(action: {
self.editMode?.wrappedValue = .active == self.editMode?.wrappedValue ? .inactive : .active
})
{
Text(.active == self.editMode?.wrappedValue ? "Done" : "Edit")
}
)
}
}
}

我的应用的图像

Answer 1

由于父视图具有NavigationView，因此不需要在细节中嵌套另一个NavigationView。从详细信息中删除NavigationView以解决此问题。

var body: some View {
//NavigationView {
Form {
TextField("Placeholder", text: $item)
.disabled(.inactive == self.editMode?.wrappedValue)
// .textFieldStyle(RoundedBorderTextFieldStyle())
.foregroundColor((.active == self.editMode?.wrappedValue) ? Color.black : Color.gray)
}
.navigationBarTitle(.inactive == self.editMode?.wrappedValue ? "(item) Details" : "Edit Pocket", displayMode: .inline)
.navigationBarItems(
trailing: Button(action: {
self.editMode?.wrappedValue = .active == self.editMode?.wrappedValue ? .inactive : .active
})
{
Text(.active == self.editMode?.wrappedValue ? "Done" : "Edit")
}
)
//}
}