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, 禁止轉載 🈲️,侵權必究⚠️!


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章