0Pricing
SwiftUI Academy · درس

ربط TextField بالحالة

صِل حقل نص بسلسلة نصية من نوع @State

ربط TextField بالحالة درس مجاني في SwiftUI Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في 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 بالحالة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة SwiftUI Academy، انتقل إلى CoddyKit PRO. تتضمن دورة SwiftUI Academy 4 دروس في المجموع.

ماذا ستتعلم في «ربط TextField بالحالة»؟

صِل حقل نص بسلسلة نصية من نوع @State تتمرن على SwiftUI Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ SwiftUI Academy؟

لا تُشترط خبرة سابقة. SwiftUI Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.

كم من الوقت يستغرق درس «ربط TextField بالحالة»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس SwiftUI Academy هذا؟

نعم. كل درس في SwiftUI Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

  1. ربط TextField بالحالة
  2. أنواع لوحة المفاتيح والعناصر النائبة
  3. SecureField لكلمات المرور
  4. التحقق المباشر من الإدخال
← العودة إلى SwiftUI Academy