EditButton
# EditButton
文档:https://developer.apple.com/documentation/swiftui/editbutton (opens new window)
负责控制打开和关闭编辑模式。这个编辑模式需要和NavigationView相结合。
在 List 的文章中,我们有写一个待完成清单的案例,本文将继续沿用。
var body: some View {
NavigationView {
List {
Section(header: Text("待办事项")) {
ForEach(listData) { item in
HStack{
Image(systemName: item.imgName)
Text(item.task)
}
}
.onDelete(perform: deleteItem)
.onMove(perform: moveItem)
}
Section(header: Text("其他内容")) {
Text("Hello World")
}
}
.toolbar { EditButton() } // 这里实现添加
.listStyle(GroupedListStyle())
.navigationTitle(Text("待办清单"))
}
}
在这个案例中,我们发现 EditButton 的标题是英文(Edit/Done),那么按钮有办法显示为中文标题么?
首先我们看下 EditButton
的代码定义:
public struct EditButton : View {
public init()
public var body: some View { get }
public typealias Body = some View
}
从它构造方法中,我们知道它的构造函数是不需要传递参数的。同时也没有任何可以修改 title 的方法提供。
EditButton 的标题和外观由系统决定,不能被覆盖。
那么还有哪些操作可以控制 EditButton
?
# 控制显示位置
使用 .navigationBarItems
可以控制EditButton
是在左还是右:
var body: some View {
NavigationView {
List {
Section(header: Text("待办事项")) {
ForEach(listData) { item in
HStack{
Image(systemName: item.imgName)
Text(item.task)
}
}
.onDelete(perform: deleteItem)
.onMove(perform: moveItem)
}
Section(header: Text("其他内容")) {
Text("Hello World")
}
}
.navigationBarItems(leading: EditButton())
.listStyle(GroupedListStyle())
.navigationTitle(Text("待办清单"))
}
}
# 获取当前的 EditMode
可以通过下面的方法获取当前的EditMode
,并实现更复杂的编辑操。
@State var isEditMode: EditMode = .inactive
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 { EditButton() }
.environment(\.editMode, $isEditMode)
.listStyle(GroupedListStyle())
.navigationTitle(Text("待办清单"))
}
}
运行效果如下:
EditMode
是一个枚举,指示用户是否可以编辑其内容:
- active 激活状态:视图内容可以编辑。
- inactive 非激活状态:无法编辑视图内容。
- transient 临时状态:视图处于临时编辑模式。
现在可以通过 isEditModel
来获取到当前的编辑状态,那么能否自己手动去改变 isEditModel
的值呢?
我们可以尝试用Button
来替代EditButton
:
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("待办清单"))
}
}
运行后的效果:
从上图可知用Button
替换EditButton
是可行的。也实现了Edit/Done
非中文问题。
总结:EditButton可以激活视图的编辑状态,从而让视图提供移动、删除、插入等功能。但其未提供丰富的接口,自定义限制比较大,可以通过 environment
的 \.editMode
绑定视图的编辑状态,这让自定义Button
控制编辑状态成为可能。通过实践可知,自定义Button
是可以实现EditButton
的所具有的功能的。