SwiftUI 表格列表教程

SwiftUI 是苹果公司推出的一款用于构建用户界面的框架，它让开发者能够以声明式的方式创建 iOS、macOS、watchOS 和 tvOS 的应用程序。表格列表是移动应用中常见的界面元素，本文将为您介绍如何在 SwiftUI 中创建和管理表格列表。

基础概念

在 SwiftUI 中，List 视图用于创建表格列表，而 Section 和 Row 则用于组织数据。

• List：表示整个表格。
• Section：用于将数据分组。
• Row：表示表格中的每一行。

创建表格列表

以下是一个简单的表格列表示例：

struct ContentView: View {
    var body: some View {
        List {
            Section(header: Text("Section 1")) {
                ForEach(0..<10) { item in
                    Text("Item \(item)")
                }
            }
            Section(header: Text("Section 2")) {
                ForEach(0..<5) { item in
                    Text("Item \(item)")
                }
            }
        }
    }
}

交互式表格

为了使表格具有交互性，您可以使用 NavigationLink 来实现跳转：

struct ContentView: View {
    var body: some View {
        List {
            Section(header: Text("Section 1")) {
                ForEach(0..<10) { item in
                    NavigationLink(destination: DetailView(item: item)) {
                        Text("Item \(item)")
                    }
                }
            }
        }
    }
}

struct DetailView: View {
    let item: Int
    var body: some View {
        Text("Detail of Item \(item)")
    }
}

图片展示

表格列表中也可以展示图片，以下是一个添加图片的例子：

struct ContentView: View {
    var body: some View {
        List {
            Section(header: Text("Section with Images")) {
                ForEach(0..<5) { item in
                    HStack {
                        Image("https://cloud-image.ullrai.com/q/Apple/")
                            .resizable()
                            .scaledToFill()
                            .frame(width: 50, height: 50)
                            .clipShape(Circle())
                            .overlay(Circle().stroke(Color.white, lineWidth: 4))
                        Text("Item \(item)")
                    }
                }
            }
        }
    }
}

以上代码展示了如何在表格列表中添加图片。

扩展阅读

如果您想了解更多关于 SwiftUI 的知识，请访问我们的 SwiftUI 教程 页面。

SwiftUI 教程