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 臨時狀態:視圖處於臨時編輯模式。
- 使用
Button
來替代EditButton
- 通過 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)
}
}
refs
https://juejin.cn/post/6983640370403868702
https://www.cnblogs.com/xgqfrms/p/16292841.html
©xgqfrms 2012-2020
www.cnblogs.com/xgqfrms 發佈文章使用:只允許註冊用戶纔可以訪問!
原創文章,版權所有©️xgqfrms, 禁止轉載 🈲️,侵權必究⚠️!