Documents: developer.apple.com/documentati…

Controls editing mode on and off. This editing mode needs to be combined with NavigationView.

In the List article, we have an example of writing a to-do List, which we will continue to use in this article.

var body: some View {
  NavigationView {
      List {
          Section(header: Text("To do")) {
              ForEach(listData) { item in
                  HStack{
                      Image(systemName: item.imgName)
                      Text(item.task)
                  }
              }
              .onDelete(perform: deleteItem)
              .onMove(perform: moveItem)
          }
          Section(header: Text("Other Content")) {
              Text("Hello World")
          }
      }
      .toolbar { EditButton()}// Add
      .listStyle(GroupedListStyle())
      .navigationTitle(Text("To do list"))}}Copy the code

In this case, we see that the EditButton displays in English, so is there a way for the button to display as a Chinese title?

First let’s look at the EditButton code definition:

public struct EditButton : View {
    public init(a)
    public var body: some View { get }
    public typealias Body = some View
}
Copy the code

We know from its constructor that it does not need to pass arguments. There are no methods to modify the title.

The title and appearance of the EditButton are determined by the system and cannot be overridden.

So what else can you do to control the EditButton?

Control display position

NavigationBarItems controls whether the EditButton is left or right:

var body: some View {
    NavigationView {
        List {
            Section(header: Text("To do")) {
                ForEach(listData) { item in
                    HStack{
                        Image(systemName: item.imgName)
                        Text(item.task)
                    }
                }
                .onDelete(perform: deleteItem)
                .onMove(perform: moveItem)
            }
            Section(header: Text("Other Content")) {
                Text("Hello World")
            }
        }
        .navigationBarItems(leading: EditButton())
        .listStyle(GroupedListStyle())
        .navigationTitle(Text("To do list"))}}Copy the code

Gets the current EditMode

You can use the following methods to get the current EditMode and implement more complex editing operations.

@State var isEditMode: EditMode = .inactive
var body: some View {
    NavigationView {
        List {
            Section(header: Text("To do")) {
                ForEach(listData) { item in
                    HStack{
                        Image(systemName: item.imgName)
                        if (isEditMode = = .active) {
                            Text(item.task + "😄")}else  {
                            Text(item.task)
                        }
                    }
                }
                .onDelete(perform: deleteItem)
                .onMove(perform: moveItem)
            }
            Section(header: Text("Other Content")) {
                Text("Hello World")
            }
        }
        .toolbar { EditButton() }
        .environment(\.editMode, $isEditMode)
        .listStyle(GroupedListStyle())
        .navigationTitle(Text("To do list"))}}Copy the code

The running effect is as follows:

EditMode is an enumeration indicating whether the user can edit its contents:

  • Active Active state: The view content can be edited.
  • Inactive: Unable to edit view contents.
  • Transient temporary state: The view is in temporary edit mode.

Now that you can use isEditModel to get the current edit state, can you manually change the value of isEditModel?

We can try to replace editButtons with buttons:

var body: some View {
    NavigationView {
        List {
            Section(header: Text("To do")) {
                ForEach(listData) { item in
                    HStack{
                        Image(systemName: item.imgName)
                        if isEditMode = = .active {
                            Text(item.task + "😄")}else  {
                            Text(item.task)
                        }
                    }
                }
                .onDelete(perform: deleteItem)
                .onMove(perform: moveItem)
            }
            Section(header: Text("Other Content")) {
                Text("Hello World")
            }
        }
        .toolbar {
            Button(isEditMode.isEditing ? "Complete": "Edit") {
                switch isEditMode {
                case .active:
                    self.isEditMode = .inactive
                case .inactive:
                    self.isEditMode = .active
                default:
                    break
                }
            }
        }
        .environment(\.editMode, $isEditMode)
        .listStyle(GroupedListStyle())
        .navigationTitle(Text("To do list"))}}Copy the code

Take a look at the effect after running:

It is possible to replace editButtons with buttons. From this we also implemented the Edit/Done non-Chinese problem.

Summary: The EditButton can activate the edit state of a view, allowing the view to provide move, delete, insert, and so on. The environment \. EditMode can bind the editing state of the view, which makes it possible to customize the Button to control the editing state. Through practice, it can be seen that a custom Button can realize the functions of EditButton.

Subsequent articles will be more and more relevant, but also more practical, like readers, remember to pay attention to!

For more SwiftUI articles, go to OldBirds/SwiftUI