拥抱SwiftUI的力量：创建可删除、可添加列表项的列表

2023-12-23 03:01:13

随着SwiftUI的不断发展，它正在成为构建精美而强大的iOS应用程序的首选框架。其中一项关键功能是创建和管理列表视图。本文将探讨如何使用SwiftUI创建可删除和可添加列表项的列表，从而为您的应用程序带来交互性和灵活性。

构建数据结构

构建可删除、可添加列表项列表的第一步是建立一个适当的数据结构来存储列表项。在SwiftUI中，我们可以使用可观察对象来实现这一目的。在下面的示例中，Item结构表示单个列表项：

struct Item: Identifiable {
    let id = UUID()
    let name: String
}

Identifiable协议确保每个列表项都有一个唯一ID，这是SwiftUI列表视图正确显示和管理列表项所必需的。

创建列表视图

有了数据结构后，就可以使用List视图创建列表视图了。List视图是SwiftUI中显示列表数据的标准视图。下面的示例显示了一个包含Item结构列表的列表视图：

struct ContentView: View {
    @State private var items = [
        Item(name: "Item 1"),
        Item(name: "Item 2"),
        Item(name: "Item 3")
    ]

    var body: some View {
        List(items) { item in
            Text(item.name)
        }
    }
}

此代码创建一个显示三个列表项的列表视图。每个列表项由其name属性表示。

添加列表项

为了允许用户添加列表项，需要在ContentView结构中添加一个按钮。此按钮将使用@State属性包装器来跟踪是否显示添加新列表项的表单：

struct ContentView: View {
    @State private var isShowingAddForm = false

    var body: some View {
        // ...
        
        Button(action: {
            isShowingAddForm = true
        }) {
            Text("Add Item")
        }
        .sheet(isPresented: $isShowingAddForm) {
            AddForm(items: $items)
        }
    }
}

Button视图显示一个"添加项目"按钮，单击该按钮会将isShowingAddForm状态属性设置为true。此操作将显示一个sheet，其中包含一个AddForm视图，允许用户添加新列表项。

删除列表项

为了允许用户删除列表项，可以在列表视图中添加一个swipeActions修改器。此修改器允许用户向左或向右滑动列表项以显示动作按钮：

List(items) { item in
    Text(item.name)
}
.swipeActions(edge: .trailing, allowsFullSwipe: false) {
    Button(role: .destructive) {
        // Delete the item
    } label: {
        Label("Delete", systemImage: "trash")
    }
}