面试题：Swift中SwiftUI的Form与List组件基础使用

Question

在SwiftUI中，Form和List组件都可用于展示列表数据。请描述它们在外观和功能上的主要区别，并举例说明如何使用Form组件创建一个包含文本输入和开关的简单表单，以及如何使用List组件展示一组图片和文字描述的数据列表。

Answer 1

外观和功能区别

1. 外观
   • Form：通常用于创建表单，有分组样式，在iOS上会有类似纸张的背景和分隔线，更适合收集用户输入等表单场景。
   • List：更侧重于展示大量数据列表，外观简洁，可滚动，适用于展示内容为主的列表。
2. 功能
   • Form：强调用户交互，如文本输入、开关等组件常与Form搭配，便于用户填写信息。
   • List：主要用于展示数据，对数据的展示和滚动优化较好，也支持一些交互，但重点在数据呈现。

使用Form创建包含文本输入和开关的简单表单示例

import SwiftUI

struct FormExample: View {
    @State private var textInput = ""
    @State private var isSwitchOn = false

    var body: some View {
        Form {
            Section {
                TextField("请输入文本", text: $textInput)
                Toggle("开关", isOn: $isSwitchOn)
            }
        }
    }
}

struct FormExample_Previews: PreviewProvider {
    static var previews: some View {
        FormExample()
    }
}

使用List展示一组图片和文字描述的数据列表示例

import SwiftUI

struct ListItem: Identifiable {
    let id = UUID()
    let imageName: String
    let description: String
}

struct ListExample: View {
    let items: [ListItem] = [
        ListItem(imageName: "person.circle", description: "这是第一个描述"),
        ListItem(imageName: "book.circle", description: "这是第二个描述")
    ]

    var body: some View {
        List(items) { item in
            HStack {
                Image(systemName: item.imageName)
                Text(item.description)
            }
        }
    }
}

struct ListExample_Previews: PreviewProvider {
    static var previews: some View {
        ListExample()
    }
}