文本框

本课属于 Coddy Swift 学习旅程的“SwiftUI 入门”单元。第 24 课，共 50 课。

TextField 可让用户输入内容。它需要一个占位符，并绑定到一个 String 状态：

@State private var name = ""

var body: some View {
    VStack {
        TextField("Your name", text: $name)
        Text("Hello, \(name)!")
    }
}

$ 会将 $name 中的状态转换为绑定：建立双向连接。文本框会显示 name 的值，用户输入的每个字符都会写回其中。下方的文本会读取同一状态，因此每次按键后都会更新。

.textFieldStyle(.roundedBorder) 会在输入框周围绘制一个熟悉的圆角边框。

挑战

简单

按姓名向用户问好。添加一个占位文字为 Your name、绑定到 name 的 TextField，并为它设置标识符 name。保留问候文本，用户输入 Ada 后，文本应显示为 Hello, Ada!。

亲手试试

import SwiftUI

@main
struct CoddyApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

自我测试

这节课包含一个小测验。开始学习即可作答，并记录你的进度。

SwiftUI 入门中的所有课

1简介

4修饰符

7列表

10项目：Coddy 咖啡馆

2显示内容

5状态与按钮

8导航

11最终挑战

3堆栈与布局

6用户输入

9共享数据