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

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")
                    }
            )

        }

    }

}

image of my app

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")
                }
        )
    //}
}

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

NavigationItem button and Edit mode button are displayed in different levels

ios

swift

swiftui-form