ป้ายกำกับ ข้อความตัวอย่าง และไอคอนนำหน้า
ทำให้อินพุตชัดเจนและใช้งานเป็นมิตร
ป้ายกำกับ ข้อความตัวอย่าง และไอคอนนำหน้า เป็นบทเรียน Jetpack Compose Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Jetpack Compose Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Jetpack Compose Academy มีบทเรียนทั้งหมด 4 บทเรียน
ทำให้ช่องนำเข้าใช้งานง่าย
กล่องว่าง ๆ ทำให้ผู้ใช้ไม่แน่ใจ ป้ายกำกับ ข้อความตัวอย่าง และไอคอนจะเปลี่ยนช่องธรรมดาให้เป็นช่องที่ ช่วยแนะนำผู้ใช้ 🧭
ช่องป้ายกำกับ
ป้ายกำกับใช้ระบุชื่อช่อง เมื่อช่องว่าง ป้ายจะอยู่ด้านใน จากนั้นจะลอยขึ้นไปที่เส้นขอบเมื่อช่องได้รับโฟกัสหรือมีข้อความแล้ว
OutlinedTextField(
value = email,
onValueChange = { email = it },
label = { Text("Email") }
)เพิ่มข้อความตัวอย่าง
ข้อความตัวอย่างคือข้อความคำแนะนำที่แสดงเฉพาะขณะที่ช่องว่าง ใช้สำหรับยกตัวอย่าง ไม่ใช่ใช้แทนชื่อช่อง
placeholder = { Text("you@example.com") }ป้ายกำกับกับข้อความตัวอย่าง
ป้ายกำกับจะแสดงอยู่เสมอเพื่อระบุช่อง ส่วนข้อความตัวอย่างจะหายไปทันทีที่ผู้ใช้เริ่มพิมพ์ ใช้ทั้งสองอย่างร่วมกัน
ไอคอนด้านหน้า
leadingIconจะอยู่ที่จุดเริ่มต้นของช่อง ซองจดหมายข้างช่องอีเมลช่วยให้เข้าใจจุดประสงค์ได้ทันที
leadingIcon = {
Icon(Icons.Default.Email, contentDescription = null)
}ไอคอนด้านหลังก็สำคัญ
trailingIconจะอยู่ที่จุดท้ายของช่อง เหมาะอย่างยิ่งสำหรับปุ่มล้างข้อความหรือปุ่มสลับการแสดงรหัสผ่าน
trailingIcon = {
Icon(Icons.Default.Clear, contentDescription = "Clear")
}อธิบายไอคอนเสมอ
กำหนด contentDescription ให้ไอคอนแต่ละอัน เพื่อให้โปรแกรมอ่านหน้าจอสามารถประกาศชื่อได้ ให้ค่าเป็น null เฉพาะเมื่อไอคอนมีไว้ตกแต่งเท่านั้น
ทำให้ไอคอนด้านหลังกดได้
ห่อไอคอนด้านหลังไว้ใน IconButton เพื่อให้ผู้ใช้แตะได้ เช่น ใช้ล้างข้อความในช่องด้วยการแตะเพียงครั้งเดียว
trailingIcon = {
IconButton(onClick = { email = "" }) {
Icon(Icons.Default.Clear, "Clear")
}
}ข้อความประกอบ
supportingTextจะแสดงคำแนะนำสั้น ๆ ใต้ช่อง เช่น รูปแบบที่ต้องใช้หรือจำนวนอักขระสูงสุด โดยไม่ทำให้ช่องนำเข้าแน่นเกินไป
supportingText = { Text("We never share your email.") }ผสมผสานอย่างเหมาะสม
ป้ายกำกับ ไอคอน และข้อความตัวอย่างสั้น ๆ ก็เพียงพอแล้ว คำแนะนำมากเกินไปจะเพิ่ม ความรบกวน ดังนั้นควรทำให้แต่ละช่องดูเรียบง่ายและชัดเจน
ช่องต่าง ๆ เป็นเพียง Composable
ทุกช่อง เช่น ป้ายกำกับและ leadingIcon ล้วนเป็น แลมบ์ดาที่เก็บ Composable ไว้ นั่นหมายความว่าคุณสามารถใส่ส่วนติดต่อผู้ใช้แบบใดก็ได้ลงในช่องเหล่านั้น
ตรวจสอบสั้น ๆ
ข้อความตัวอย่างจะหายไปจากช่องข้อความเมื่อใด
สรุป
คุณตกแต่งช่องนำเข้าด้วย ป้ายกำกับ คำแนะนำในข้อความตัวอย่าง ไอคอนด้านหน้าและด้านหลัง รวมถึงข้อความประกอบ ช่องที่ใช้งานง่าย ผู้ใช้ก็มีความสุข 😊
เรียนรู้ Kotlin ด้วย AI tutor — ฟรี
เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป
- คอร์ส
- 30
- บทเรียน
- 120
คำถามที่พบบ่อย
บทเรียน “ป้ายกำกับ ข้อความตัวอย่าง และไอคอนนำหน้า” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “ป้ายกำกับ ข้อความตัวอย่าง และไอคอนนำหน้า” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Jetpack Compose Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Jetpack Compose Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “ป้ายกำกับ ข้อความตัวอย่าง และไอคอนนำหน้า”
ทำให้อินพุตชัดเจนและใช้งานเป็นมิตร คุณปฏิบัติ Jetpack Compose Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Jetpack Compose Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Jetpack Compose Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “ป้ายกำกับ ข้อความตัวอย่าง และไอคอนนำหน้า” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Jetpack Compose Academy นี้ได้ไหม
ได้ บทเรียน Jetpack Compose Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- TextField และ OutlinedTextField
- ป้ายกำกับ ข้อความตัวอย่าง และไอคอนนำหน้า
- ชนิดแป้นพิมพ์และการดำเนินการ IME
- การตรวจสอบในบรรทัดและสถานะข้อผิดพลาด