PricingLoginStart free
Jetpack Compose Academy · บทเรียน

สถานะเปิดใช้ ปิดใช้ และกำลังโหลด

สะท้อนความพร้อมใช้งานในปุ่มของคุณ

บทเรียน 3 จาก 413 ขั้นตอน

สถานะเปิดใช้ ปิดใช้ และกำลังโหลด เป็นบทเรียน Jetpack Compose Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Jetpack Compose Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Jetpack Compose Academy มีบทเรียนทั้งหมด 4 บทเรียน

ปุ่มมีอารมณ์แตกต่างกัน

ปุ่มที่ดีควรสะท้อนความเป็นจริง: พร้อมใช้งาน ถูกระงับ หรือกำลังทำงาน Compose ช่วยให้คุณแสดงสถานะเหล่านี้ เพื่อให้ผู้ใช้รู้เสมอว่าสามารถทำอะไรได้บ้าง 🚦

พารามิเตอร์ enabled

ปุ่มทุกปุ่มรับแฟล็ก enabled หากกำหนดเป็น false ปุ่มจะเปลี่ยนเป็นสีเทาและไม่ตอบสนองต่อการแตะโดยอัตโนมัติ

Button(
    onClick = { submit() },
    enabled = false
) { Text("Submit") }

ควบคุม enabled จากสถานะ

พลังที่แท้จริงคือการผูก enabled เข้ากับสถานะ เชื่อมเข้ากับการตรวจสอบความถูกต้อง เพื่อให้ปุ่มทำงานได้เฉพาะเมื่อข้อมูลที่ป้อนพร้อม

Button(
    onClick = { submit() },
    enabled = name.isNotBlank()
) { Text("Submit") }

ปุ่มที่ปิดใช้งานหมายถึงถูกระงับ

ปุ่มที่ปิดใช้งานยังคงแสดงอยู่ ทำให้ผู้ใช้เห็นว่าการกระทำนั้นมีอยู่ ลักษณะที่จางลงจะสื่อว่าเหตุใดจึงยังทำไม่ได้โดยไม่ต้องแสดงข้อความข้อผิดพลาด

แสดงความคืบหน้าขณะทำงาน

สำหรับการกระทำที่ใช้เวลานาน ให้แสดงสถานะกำลังโหลด ติดตามค่าบูลีน แล้วเปลี่ยนป้ายกำกับเป็นตัวหมุนระหว่างที่งานกำลังทำงาน

var loading by remember { mutableStateOf(false) }

ปิดใช้งานระหว่างการโหลด

ระหว่างการโหลด ให้กำหนด enabled = !loading เพื่อป้องกันไม่ให้ผู้ใช้แตะซ้ำและเริ่มการกระทำเดิมสองครั้ง

Button(
    onClick = { loading = true },
    enabled = !loading
) { Text("Save") }

เปลี่ยนเป็นตัวหมุน

ภายในเนื้อหา ให้ตรวจสอบแฟล็ก: แสดง CircularProgressIndicator ขนาดเล็กขณะ loading และแสดงป้ายกำกับในกรณีอื่น

Button(onClick = { }, enabled = !loading) {
    if (loading) CircularProgressIndicator(Modifier.size(18.dp))
    else Text("Save")
}

ลดขนาดตัวหมุน

ตัวหมุนเริ่มต้นมีขนาดใหญ่ จำกัดขนาดด้วย Modifier.size เพื่อให้พอดีกับตำแหน่งที่เคยแสดงป้ายกำกับ

CircularProgressIndicator(
    modifier = Modifier.size(18.dp),
    strokeWidth = 2.dp
)

รีเซ็ตเมื่อเสร็จสิ้น

เมื่องานเสร็จสิ้น ให้กำหนด loading กลับเป็น false ป้ายกำกับจะกลับมา และปุ่มจะกดได้อีกครั้ง

onResult = { loading = false }

สถานะช่วยป้องกันข้อผิดพลาด

enabled และ loading ทำงานร่วมกันเพื่อป้องกันการกระทำของคุณ: ไม่ให้แตะก่อนข้อมูลจะถูกต้อง และไม่ให้แตะซ้ำขณะงานกำลังทำงาน

สื่อสาร อย่าซ่อน

ควรปิดใช้งานปุ่มแทนการซ่อน ปุ่มที่มองเห็นแต่ปิดใช้งานจะช่วยสอนผู้ใช้ว่าต้องทำอย่างไรจึงจะปลดล็อกได้

ตรวจสอบอย่างรวดเร็ว

การบันทึกของคุณใช้เวลาสองวินาที และผู้ใช้ยังคงแตะซ้ำสองครั้ง

ตอบคำถามในบทเรียนแบบโต้ตอบ

ทบทวน: ปุ่มที่มีสถานะ

คุณได้เรียนรู้การสะท้อนสถานะจริง: enabled ควบคุมตามความถูกต้อง ส่วนแฟล็ก loading แสดงความคืบหน้าและป้องกันการทำซ้ำ ปุ่มที่ซื่อตรง ผู้ใช้ก็มีความสุข 🎯

เริ่มต้นได้ฟรี

เรียนรู้ 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 ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน

บทเรียน “สถานะเปิดใช้ ปิดใช้ และกำลังโหลด” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Jetpack Compose Academy นี้ได้ไหม

ได้ บทเรียน Jetpack Compose Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. Button และ onClick
  2. ปุ่มข้อความ ปุ่มมีเส้นขอบ และปุ่มไอคอน
  3. สถานะเปิดใช้ ปิดใช้ และกำลังโหลด
  4. clickable บน Composable ใด ๆ
← กลับไปที่ Jetpack Compose Academy