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

ปุ่มข้อความ ปุ่มมีเส้นขอบ และปุ่มไอคอน

เลือกชนิดปุ่มที่เหมาะกับงาน

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

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

ปุ่มมีบุคลิกแตกต่างกัน

ไม่ใช่ทุกการกระทำจะเหมาะกับปุ่มทึบที่โดดเด่น Compose มีรูปแบบปุ่มหลายแบบ แต่ละแบบสื่อระดับการเน้นที่แตกต่างกัน 🎨

ปุ่มทึบ

ปุ่มมาตรฐานเป็นปุ่มทึบที่มีการเน้นสูง ดึงดูดสายตา จึงควรสงวนไว้สำหรับการกระทำหลักเพียงรายการเดียวในแต่ละหน้าจอ

Button(onClick = { pay() }) {
    Text("Pay now")
}

OutlinedButton สำหรับการกระทำรอง

OutlinedButton มีเพียงเส้นขอบและไม่มีพื้นทึบ จึงดูเป็นตัวเลือกที่ชัดเจนแต่มีความสำคัญรองลงมา เมื่อวางอยู่ข้างปุ่มทึบ

OutlinedButton(onClick = { cancel() }) {
    Text("Cancel")
}

TextButton สำหรับการเน้นต่ำ

TextButton แสดงเฉพาะป้ายกำกับ โดยไม่มีเส้นขอบหรือพื้นทึบ เหมาะอย่างยิ่งกับการกระทำที่ไม่โดดเด่น เช่น ดูข้อมูลเพิ่มเติม หรือตัวเลือกในกล่องโต้ตอบ

TextButton(onClick = { dismiss() }) {
    Text("Not now")
}

การเน้นมีลำดับขั้น

ให้คิดว่าการเน้นเป็นบันได: แบบทึบโดดเด่นที่สุด แบบมีเส้นขอบอยู่ระดับกลาง และแบบข้อความเบาที่สุด เลือกรูปแบบให้เหมาะกับน้ำหนักของการกระทำ

ไอคอนภายในปุ่ม

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

Button(onClick = { add() }) {
    Icon(Icons.Default.Add, null)
    Spacer(Modifier.width(8.dp))
    Text("Add")
}

IconButton

IconButton คือพื้นที่แตะขนาดกะทัดรัดที่ไม่มีป้ายกำกับและมีเพียงไอคอนเดียว เหมาะสำหรับแถบเครื่องมือและการกระทำบนแถบแอป

IconButton(onClick = { share() }) {
    Icon(Icons.Default.Share, "Share")
}

อธิบายไอคอนของคุณเสมอ

กำหนด contentDescription ให้ปุ่มที่มีแต่ไอคอน เพื่อให้โปรแกรมอ่านหน้าจอประกาศชื่อปุ่ม หากคำอธิบายเป็น null ปุ่มนั้นจะถูกซ่อนจากการช่วยเหลือพิเศษ

IconButton(onClick = { favorite() }) {
    Icon(Icons.Default.Favorite, "Favorite")
}

FilledIconButton เพื่อเพิ่มการเน้น

ต้องการปุ่มไอคอนที่โดดเด่นใช่ไหม FilledIconButton จะเพิ่มพื้นหลังทึบ ทำให้มีการเน้นมากกว่าแบบธรรมดา

FilledIconButton(onClick = { record() }) {
    Icon(Icons.Default.Mic, "Record")
}

เลือกรูปแบบให้เหมาะสม

การเลือกที่ดีช่วยนำทางผู้ใช้: ใช้แบบทึบสำหรับยืนยัน แบบมีเส้นขอบสำหรับทางเลือกอื่น แบบข้อความสำหรับปิด และ IconButton สำหรับพื้นที่จำกัด

onClick เหมือนกัน หน้าตาต่างกัน

ทุกรูปแบบใช้สัญญา onClick เดียวกัน คุณเปลี่ยนเฉพาะน้ำหนักทางภาพเท่านั้น ไม่ได้เปลี่ยนวิธีเชื่อมการกระทำ

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

คุณต้องการการกระทำที่ไม่โดดเด่น มีเพียงป้ายกำกับ และไม่มีเส้นขอบหรือพื้นทึบ

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

ทบทวน: เครื่องมือถูกต้อง การแตะถูกต้อง

ตอนนี้คุณมีกล่องเครื่องมือแล้ว ได้แก่ ปุ่มทึบ OutlinedButton, TextButton และ IconButton จับคู่ระดับการเน้นให้เหมาะกับการกระทำ และใส่คำอธิบายให้ไอคอน ✨

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

เรียนรู้ 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 ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

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

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