75142913在线留言
【SwiftUI基础篇】8 EditButton 控制打开和关闭批量编辑模式_IOS开发_网络人

【SwiftUI基础篇】8 EditButton 控制打开和关闭批量编辑模式

Kwok 发表于:2021-04-02 13:02:32 点击:9 评论: 0

EditButton 负责控制打开和关闭编辑模式。当点击开发编辑模式时,SwiftUI 会为我们自动生成符合 iOS 习惯的 删除和移动操作 UI(当然如果我们只绑定了删除,就只会显示删除 UI)。注意这个编辑模式需要和 NavigationView 相结合。

一、基本编辑模式

struct ContentView: View {
    @State private var fruits = ["苹果","香蕉","榴莲","芒果"]
    var body: some View {
        NavigationView{
            List {
                ForEach(
                    fruits,
                    id: .self
                ) { fruit in
                    Text(fruit)
                }
                .onDelete {
                    print($0)
                    self.deleteFruit(at :$0)
                }
                .onMove {
                    print($0,$1)
                    self.moveFruit(from: $0, to: $1)
                }
            }
            .navigationTitle("水果编辑")
            //绑定 EditButton 的方法就是使用 .toolbar
            .toolbar {
                EditButton()//切换当前编辑范围的编辑模式的按钮。
            }
        }
    }
    func deleteFruit(at offset: IndexSet) {
        fruits.remove(atOffsets: offset)
    }
    func moveFruit(from source: IndexSet, to destination: Int) {
        fruits.move(fromOffsets: source, toOffset: destination)
    }
}

使用 .navigationBarItems可以控制 EditButton 是在左(leading)还是右(trailing)、.navigationBarItems(leading: EditButton())、.navigationBarItems(trailing: EditButton())

 二、更复杂的编辑模式

可以通过下面的方法获取当前的 EditMode,并实现更复杂的编辑操作这个例子就是通过改变视图来实现编辑。

@State var isEditMode: EditMode = .inactive
@State var sampleData = ["苹果", "香蕉", "木瓜", "芒果"]
var body: some View {
    NavigationView {
        List(0..<sampleData.count) { i in
            // 通过对不同 edit mode 设置不同视图来修改内容
            if (isEditMode == .active) {
                TextField("水果", text: $sampleData[i])
            } else  {
                Text(sampleData[i])
            }
        }
        .navigationTitle(Text("水果"))
        .navigationBarItems(trailing: EditButton())
        // 用 .environment 获取当前的 edit mode,
        // 注意这行需要在添加 EditButton 之后加
        .environment(.editMode, $isEditMode)
    }
}

enum EditMode 是一个枚举视图的模式,指示用户是否可以编辑其内容。

1.active 激活状态:视图内容可以编辑。

2.inactive 非激活状态:无法编辑视图内容。

3.transient 临时状态 视图处于临时编辑模式。

除非注明,网络人的文章均为原创,转载请以链接形式标明本文地址:http://www.neter8.com/ios/122.html
标签:编辑模式Kwok最后编辑于:2021-04-03 10:03:11
0
感谢打赏!

《【SwiftUI基础篇】8 EditButton 控制打开和关闭批量编辑模式》的网友评论(0)

本站推荐阅读

热门点击文章