SwiftUI基础组件之Form解析

原创

已于 2025-02-20 20:38:07 修改 · 1.1k 阅读

22 ·

CC 4.0 BY-SA版权

文章标签：

#swiftui #Form #Section #onDelete #onMove

于 2025-02-20 20:36:43 首次发布

文章目录

一、引言

在 iOS 应用开发中，收集用户信息是常见的需求，而表单是实现这一需求的重要界面形式。SwiftUI 提供的 Form 组件，专门用于创建结构清晰、美观易用的表单界面。它能够自动处理布局、样式和交互，让开发者可以专注于表单内容的设计。

二、基本概念

Form 是 SwiftUI 中的一个容器视图，用于将多个表单元素（如文本框、开关、选择器等）组合在一起，形成一个完整的表单界面。Form 会自动应用适合表单的样式，包括分隔线、边距和背景色等，同时支持分组显示内容，方便对表单元素进行分类和组织。

三、基本创建

以下是一个简单的 Form 示例，包含一个文本框和一个开关：

import SwiftUI

struct ContentView: View {
   
   
    @State private var name = ""
    @State private var isSubscribed = false

    var body: some View {
   
   
        Form {
   
   
            TextField("姓名", text: $name)
            Toggle("订阅新闻", isOn: $isSubscribed)
        }
    }
}

在这个示例中：

@State private var name = "" 和 @State private var isSubscribed = false：定义了两个 @State 变量，分别用于存储用户输入的姓名和订阅状态。
Form { ... }：创建了一个 Form 容器，内部包含一个 TextField 和一个 Toggle，它们会按照垂直方向依次排列，并且 Form 会自动添加分隔线和合适的边距。

四、常用属性及代码示例

4.1 Section

Section 用于将表单内容进行分组，每个分组可以有自己的标题和页脚，使表单结构更加清晰。

import SwiftUI

struct ContentView: View {
   
   
    @State private var email = ""
    @State private var password = ""
    @State private var isRememberMe = false

    var body: some View {
   
   
        Form {
   
   
            Section(header: Text("登录信息")) {
   
   
                TextField("邮箱", text: $email)
                SecureField("密码", text: $password)
            }
            Section(header: Text("设置"), footer: Text("勾选后下次自动登录")) {
   
   
                Toggle("记住我", isOn: $isRememberMe)
            }
        }
    }
}

在这个例子中，使用 Section 将表单分为两个分组：“登录信息”和“设置”。每个分组有自己的标题，“设置”分组还有一个页脚，用于提供额外的说明信息。
在这里插入图片描述

4.2 ListStyle

ListStyle 用于设置 Form 的列表样式，虽然 Form 本质上是一种特殊的列表，但可以通过 ListStyle 来改变其外观。常见的样式有 .plain、.inset、.grouped 等。

import SwiftUI

struct ContentView: View {
   
   
    @State private var age = 0

    var body: some View {
   
   
        Form {
   
   
            Stepper("年龄: