SwiftUI查漏补缺(4) - Form

1个月前 69次点击 来自 SwiftUI

收录专题: SwiftUI查漏补缺

Form的作用类似Html5中的form表单标签,连名字都取得一样,更不用提功能:

/// A container for grouping controls used for data entry, such as in settings
/// or inspectors.
///
/// - SeeAlso: `Section`, which can be used to add sections between groups of
///     content.
@available(iOS 13.0, OSX 10.15, tvOS 13.0, watchOS 6.0, *)
public struct Form<Content> : View where Content : View {

    ```
}

示例是一个简陋的用户信息填写页面
Form使用示例

代码如下:

struct FormView: View {
    @State private var name: String = ""
    @State private var phone: String = ""

    @State private var selectedGenderIndex: Int = 0
    private var genderOptions = ["🙍‍♂️ 男", "🙍‍♀️ 女", "🤖 其他"]

    @State private var birthday = Date()

    @State private var acceptedTerms: Bool = false

    var body: some View {
        NavigationView {
            Form {
                Section(header: Text("必填")) {
                    TextField("用户名", text: $name)
                    DatePicker(selection: $birthday, in: ...Date(), displayedComponents: .date) {
                        Text("生日")
                    }
                }

                Section(header: Text("选填")) {
                    TextField("手机号码", text: $phone).keyboardType(.phonePad)

                    Picker("性别", selection: $selectedGenderIndex) {
                        ForEach(0 ..< genderOptions.count) {
                            Text(self.genderOptions[$0])
                        }
                    }
                }

                Toggle("我同意并遵守App用户协议 & 隐私政策", isOn: $acceptedTerms)
            }.navigationBarTitle("用户信息")
        }
    }
}
Card image cap
开发者雷

尘世间一个小小的开发者,每天增加一些无聊的知识

技术文档 >> 系列应用 >>
热推应用

Let'sLearnSwift

学习Swift的入门教程
标签