SwiftUI 基础控件 - List 的使用

在 SwiftUI 中，List 是用于显示一系列行的控件，类似于 iOS 中的表格视图。下面是一些常见的 List 使用方法。

1. 简单的静态列表

如果是一个简单的静态列表，可以直接使用字符串数组：

struct ContentView: View {
    var body: some View {
        List {
            Text("First Item")
            Text("Second Item")
            Text("Third Item")
        }
    }
}

效果图如下：

2. 动态列表

如果是动态数据，可以通过 List 的初始化方法传入数组：

struct ContentView: View {
    let items = ["苹果", "香蕉", "橙子"]

    var body: some View {
        List(items, id: \.self) { item in
            Text(item)
        }
    }
}

在这个例子中，items 是一个字符串数组，每个元素都会生成一个文本行。id: \.self 表示用元素本身作为标识符。效果图如下：

3. 使用自定义模型的列表

如果列表项是自定义模型，需要让模型遵循 Identifiable 协议，这样 List 就知道如何唯一识别每个项。

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

struct ContentView: View {
    let fruits = [        Fruit(name: "苹果"),        Fruit(name: "香蕉"),        Fruit(name: "橙子")    ]

    var body: some View {
        List(fruits) { fruit in
            Text(fruit.name)
        }
    }
}

4. 带有 Section 的列表

可以将 List 分成多个 Section：

struct ContentView: View {
    var body: some View {
        List {
            Section(header: Text("水果")) {
                Text("苹果")
                Text("香蕉")
                Text("橙子")
            }
            
            Section(header: Text("蔬菜")) {
                Text("西红柿")
                Text("胡萝卜")
                Text("生菜")
            }
        }
    }
}

效果图如下：

5. 可删除和可移动的列表

如果想要支持删除和移动操作，可以使用 onDelete 和 onMove 修饰符：

struct ContentView: View {
    @State private var items = ["苹果", "香蕉", "橙子"]

    var body: some View {
        List {
            ForEach(items, id: \.self) { item in
                Text(item)
            }
            .onDelete(perform: deleteItems)
            .onMove(perform: moveItems)
        }
    }

    func deleteItems(at offsets: IndexSet) {
        items.remove(atOffsets: offsets)
    }
    
    func moveItems(from source: IndexSet, to destination: Int) {
        items.move(fromOffsets: source, toOffset: destination)
    }
}

删除效果图如下：

以上就是在 SwiftUI 中 List 的一些基本使用方法。通过用法可以看到比 UIKit 的 UITableView 的易用性还是高很多的。希望本文对大家有所帮助。