SwiftUI Academy · 课时

将 TextField 绑定到状态

将文本字段连接到一个 @State 字符串。

将 TextField 绑定到状态 是 CoddyKit 上的免费 SwiftUI Academy 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 SwiftUI Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 SwiftUI Academy 课程共包含 4 节课。

本课时的部分内容尚未翻译，以英文显示。

Meet TextField

A TextField is SwiftUI's box where users type. Give it a prompt and somewhere to store what they enter, and you have live text input. ✍️

Text Needs a Home

Typed characters must go somewhere. You store them in a @State string that the text field reads from and writes to as the user types.

@State private var name = ""

The Binding Connection

A TextField needs a two-way link called a binding. It both reads the current value and writes new keystrokes back into your state.

The Dollar Sign

To pass a binding, prefix the property with $. Writing $name hands the text field a two-way connection instead of a plain copy.

TextField("Name", text: $name)

The Placeholder

The first argument is the placeholder: faint hint text shown when the field is empty. It disappears the moment the user starts typing.

TextField("Enter your name", text: $name)

Reading the Value

Because the field writes into your state, you can read name anywhere in the body to react to what the user has typed so far.

Text("Hello, \(name)")

A Bordered Look

Add the textFieldStyle modifier with .roundedBorder to give the field a clean, tappable outline instead of a bare line.

TextField("Name", text: $name)
  .textFieldStyle(.roundedBorder)

Live Updates Are Free

You never write code to refresh the screen. When the binding changes the state, SwiftUI re-renders the view automatically for you. ✨

One Source of Truth

The @State string is the single source of truth. The field and any Text that reads it always stay perfectly in sync.

Plain Value vs Binding

Writing name passes a read-only copy. Writing $name passes the binding the field needs to send edits back. The dollar sign matters.

Putting It Together

A state string, a TextField bound with $, and a Text that reads it: that is a complete, reactive input screen.

TextField("Name", text: $name)
Text("Hi, \(name)")

Quick Check

How do you give a TextField a two-way link to a @State string?

Recap

You bound a TextField to @State with the $ prefix, so typing updates your value and the UI refreshes itself. That is reactive input in a nutshell. 🎉

常见问题解答

「将 TextField 绑定到状态」课时是免费的吗？

是的 — 「将 TextField 绑定到状态」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 SwiftUI Academy 课程的其余内容，请升级到 CoddyKit PRO。 SwiftUI Academy 课程共包含 4 节课。

「将 TextField 绑定到状态」这节课中我会学到什么？

将文本字段连接到一个 @State 字符串。你通过在浏览器中直接运行的动手代码来练习 SwiftUI Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 SwiftUI Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 SwiftUI Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「将 TextField 绑定到状态」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 SwiftUI Academy 课中编写并运行代码吗？

能。每节 SwiftUI Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 SwiftUI Academy