SwiftUI - Как мне сделать редактирование строк в списке?

Я хотел бы использовать EditButton() для переключения режима редактирования, и чтобы мои строки списка переключались в режим редактирования. Я хочу включить новую кнопку в режиме редактирования для открытия модального. Я даже не могу получить значение EditMode для переключения содержимого строки вообще.

struct ContentView: View {

    @Environment(\.editMode) var isEditMode

    var sampleData = ["Hello", "This is a row", "So is this"]

    var body: some View {
        NavigationView {

            List(sampleData, id: \.self) { rowValue in
                if (self.isEditMode?.value == .active) {
                    Text("now is edit mode")  // this is never displayed
                } else  {
                    Text(rowValue)
                }
            }
            .navigationBarTitle(Text("Edit A Table?"), displayMode: .inline)
            .navigationBarItems(trailing:
                EditButton()
            )
        }
    }
}

1 ответ

Решение

Вам необходимо установить значение среды для editMode в списке:

struct ContentView: View {
    @State var isEditMode: EditMode = .inactive

    var sampleData = ["Hello", "This is a row", "So is this"]

    var body: some View {
        NavigationView {
            List(sampleData, id: \.self) { rowValue in
                if (self.isEditMode == .active) {
                    Text("now is edit mode")
                } else  {
                    Text(rowValue)
                }
            }
            .navigationBarTitle(Text("Edit A Table?"), displayMode: .inline)
            .navigationBarItems(trailing: EditButton())
            .environment(\.editMode, self.$isEditMode)
        }
    }
}

Вы должны быть осторожны, и убедитесь, .environment(\.editMode, self.$isEditMode) идет после .navigationBarItems(trailing: EditButton()),

Добавляя к ответу @kontiki, если вы предпочитаете использовать логическое значение для editMode, чтобы его было легче изменить, используйте это @State переменная:

@State var editMode: Bool = false

И измените .environment модификатор к этому:

.environment(\.editMode, .constant(self.editMode ? EditMode.active : EditMode.inactive))

Теперь переключение в режим редактирования / из режима редактирования с помощью вашей собственной кнопки очень просто:

Button(action: {
    self.editMode = !self.editMode
}, label: {
    Text(!self.editMode ? "Edit" : "Done")
})
Другие вопросы по тегам