التسميات والعناصر النائبة والأيقونات البادئة
اجعل حقول الإدخال واضحة وسهلة الاستخدام
التسميات والعناصر النائبة والأيقونات البادئة درس مجاني في Jetpack Compose Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Jetpack Compose Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Jetpack Compose Academy 4 دروس في المجموع.
بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.
Make Inputs Friendly
A bare box leaves users guessing. Labels, placeholders, and icons turn a plain field into one that guides the user. 🧭
The label Slot
The label names the field. It sits inside when empty, then floats up to the border once the field is focused or filled.
OutlinedTextField(
value = email,
onValueChange = { email = it },
label = { Text("Email") }
)Add a Placeholder
A placeholder is hint text shown only while the field is empty. Use it for an example, not for the field's name.
placeholder = { Text("you@example.com") }Label vs Placeholder
The label always stays visible to identify the field. The placeholder vanishes the instant the user starts typing. Use both together.
Leading Icons
A leadingIcon sits at the start of the field. An envelope next to an email box makes its purpose obvious at a glance.
leadingIcon = {
Icon(Icons.Default.Email, contentDescription = null)
}Trailing Icons Too
A trailingIcon sits at the end. It is perfect for a clear button or a password visibility toggle.
trailingIcon = {
Icon(Icons.Default.Clear, contentDescription = "Clear")
}Always Describe Icons
Give each Icon a contentDescription so screen readers can announce it. Pass null only when the icon is purely decorative.
Make the Trailing Icon Tappable
Wrap a trailing icon in an IconButton so users can tap it, for example to clear the field in one touch.
trailingIcon = {
IconButton(onClick = { email = "" }) {
Icon(Icons.Default.Clear, "Clear")
}
}Supporting Text
supportingText shows a small hint below the field, like a format reminder or a character limit, without crowding the input.
supportingText = { Text("We never share your email.") }Combine Them Thoughtfully
Label plus icon plus a short placeholder is plenty. Too many hints add noise, so keep each field calm and clear.
Slots Are Just Composables
Every slot, like label and leadingIcon, is a lambda holding Composables. That means you can put any UI you want inside them.
Quick Check
When does a placeholder disappear from a text field?
Recap
You dressed up inputs with a label, placeholder hints, leading and trailing icons, and supporting text. Friendly fields, happy users. 😊
الأسئلة الشائعة
هل درس «التسميات والعناصر النائبة والأيقونات البادئة» مجاني؟
نعم — نص درس «التسميات والعناصر النائبة والأيقونات البادئة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Jetpack Compose Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Jetpack Compose Academy 4 دروس في المجموع.
ماذا ستتعلم في «التسميات والعناصر النائبة والأيقونات البادئة»؟
اجعل حقول الإدخال واضحة وسهلة الاستخدام تتمرن على Jetpack Compose Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Jetpack Compose Academy؟
لا تُشترط خبرة سابقة. Jetpack Compose Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.
كم من الوقت يستغرق درس «التسميات والعناصر النائبة والأيقونات البادئة»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Jetpack Compose Academy هذا؟
نعم. كل درس في Jetpack Compose Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- TextField وOutlinedTextField
- التسميات والعناصر النائبة والأيقونات البادئة
- أنواع لوحة المفاتيح وإجراءات IME
- التحقق المضمّن وحالات الخطأ