SwiftUI 改变 EditButton 文字 All In One

SwiftUI 改变 EditButton 文字 All In One

EditButton

不支持自定义 💩

      // SwiftUI 国际化 ? language
      .navigationBarItems(
        leading: EditButton(),
        trailing: NavigationLink("添加", destination: AddItemView())
        // trailing: NavigationLink("Add", destination: AddItemView())
      )

@State private var fruits = [
    "Apple",
    "Banana",
    "Papaya",
    "Mango"
]

var body: some View {
    NavigationView {
        List {
            ForEach(fruits, id: \.self) { fruit in
                Text(fruit)
            }
            .onDelete { fruits.remove(atOffsets: $0) }
            .onMove { fruits.move(fromOffsets: $0, toOffset: $1) }
        }
        .navigationTitle("Fruits")
        .toolbar {
            EditButton()
        }
    }
}

https://developer.apple.com/documentation/swiftui/editbutton

iEditMode ✅

@Environment(\.editMode) private var editMode
@State private var name = "Maria Ruiz"

var body: some View {
    Form {
        if editMode?.wrappedValue.isEditing == true {
            TextField("Name", text: $name)
        } else {
            Text(name)
        }
    }
    .animation(nil, value: editMode?.wrappedValue)
    .toolbar { // Assumes embedding this view in a NavigationView.
        EditButton()
    }
}

https://developer.apple.com/documentation/swiftui/environmentvalues/editmode

solution ✅

  @State private var editMode: EditMode = EditMode.inactive;
  // @Environment(\.editMode) private var editMode;

      .navigationBarItems(
        // leading: EditButton(),
        // leading: editMode.isEditing == .active ? Text("编辑") : Text("完成"),
        leading: Button(editMode.isEditing ? "完成": "编辑") {
          switch editMode {
            case .active:
              self.editMode = .inactive
            case .inactive:
              self.editMode = .active
            default:
              break
          }
        },
        trailing: NavigationLink("添加", destination: AddItemView())
        // trailing: NavigationLink("Add", destination: AddItemView())
      )

demo

EditMode 是一个枚举，指示用户是否可以编辑其内容：

active 激活状态：视图内容可以编辑。
inactive 非激活状态：无法编辑视图内容。
transient 临时状态：视图处于临时编辑模式。

1. 使用 Button 来替代 EditButton
2. 通过 isEditModel 来获取到当前的编辑状态， 自定义展示文本

var body: some View {
    NavigationView {
        List {
            Section(header: Text("待办事项")) {
                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("其他内容")) {
                Text("Hello World")
            }
        }
        .toolbar {
            Button(isEditMode.isEditing ? "完成": "编辑") {
                switch isEditMode {
                case .active:
                    self.isEditMode = .inactive
                case .inactive:
                    self.isEditMode = .active
                default:
                    break
                }
            }
        }
        .environment(\.editMode, $isEditMode)
        .listStyle(GroupedListStyle())
        .navigationTitle(Text("待办清单"))
    }
}

SwiftUI custom navigation back button

default back ❌

custom customBack ✅

import SwiftUI

struct AddItemView: View {
  @EnvironmentObject var listViewModel: ListViewModel;
  // @Environment(\.presentationMode) var presentationMode;
  // @Environment(\.presentationMode) var env;
  @Environment(\.presentationMode) var env: Binding<PresentationMode>


  var customBack : some View {
    Button(
      action: {
        self.env.wrappedValue.dismiss();
      },
      label: {
//        HStack {
//          Image("ic_back")
//            .aspectRatio(contentMode: .fit)
//            .foregroundColor(.blue)
//          Text("返回")
//        }
        HStack {
          Image(systemName: "chevron.backward")
            // .imageScale(Image.Scale.large)
          // Text("返回")
          Text("待办清单")
        }
      }
    )

  var body: some View {
    ScrollView {
      VStack {
        // TextField("please input your idea ...", text: $text)
        TextField("请输入你的想法 💡", text: $text)
          .padding(.horizontal)
          .frame(height: 55)
          .background(Color(UIColor.secondarySystemBackground))
          .cornerRadius(10)
        Button(
          /*
          action: {
            clickSave();
          },
          */
          action: clickSave,
          label: {
            // Text("Save".uppercased())
            Text("保存".uppercased())
              .padding()
              .font(.headline)
              .frame(height: 55)
              .frame(maxWidth: .infinity)
              .foregroundColor(.white)
              .background(Color.accentColor)
              .cornerRadius(10)
          }
        )
      }
      .padding(14)
    }
    .navigationTitle("添加待办事项 ✍🏻")
    // .navigationTitle("Add Item ✍🏻")
    .navigationBarBackButtonHidden(true)
    .navigationBarItems(leading: customBack)
    .alert(isPresented: $showAlert, content: getAlert)
  }
}

https://stackoverflow.com/questions/56571349/custom-back-button-for-navigationviews-navigation-bar-in-swiftui

refs

https://juejin.cn/post/6983640370403868702

https://www.cnblogs.com/xgqfrms/p/16292841.html

---

---

©xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---