ปุ่ม

คีย์เวิร์ด: AiAssisted, ผลิตภัณฑ์:JetpackCompose

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

ประเภท ลักษณะที่ปรากฏ วัตถุประสงค์
เติมพื้น พื้นหลังสีเดียวที่มีข้อความตัดกัน ปุ่มที่มีการเน้นสูง ปุ่มเหล่านี้ใช้สำหรับการกระทำหลักใน แอปพลิเคชัน เช่น "ส่ง" และ "บันทึก" เอฟเฟกต์เงาจะไฮไลต์ความสำคัญของปุ่ม
โทนสีแบบทึบ สีพื้นหลังจะแตกต่างกันไปตามพื้นผิว รวมถึงการกระทำหลักหรือการกระทำที่สำคัญด้วย ปุ่มสีโทนเติมให้ น้ำหนักภาพมากขึ้นและเหมาะกับฟังก์ชันต่างๆ เช่น "เพิ่มลงในรถเข็น" และ "ลงชื่อเข้าใช้"
สูงกว่าปกติ โดดเด่นด้วยการมีเงา มีวัตถุประสงค์คล้ายกับปุ่มสี เพิ่มระดับความสูงเพื่อให้ ปุ่มดูโดดเด่นยิ่งขึ้น
เติมขอบ มีเส้นขอบที่ไม่มีการเติม ปุ่มที่มีความสำคัญระดับปานกลาง ซึ่งมีการดำเนินการที่สำคัญแต่ไม่ใช่การดำเนินการหลัก ปุ่มเหล่านี้ทำงานร่วมกับปุ่มอื่นๆ ได้ดีเพื่อระบุการดำเนินการสำรอง รอง เช่น "ยกเลิก" หรือ "กลับ"
ข้อความ แสดงข้อความโดยไม่มีพื้นหลังหรือเส้นขอบ ปุ่มที่มีความสำคัญต่ำ เหมาะสำหรับการดำเนินการที่ไม่สำคัญมาก เช่น ลิงก์การนำทาง หรือฟังก์ชันรอง เช่น "ดูข้อมูลเพิ่มเติม" หรือ "ดู รายละเอียด"

รูปภาพนี้แสดงปุ่ม 5 ประเภทใน Material Design

ตัวอย่างคอมโพเนนต์ปุ่มทั้ง 5 รายการ โดยไฮไลต์ลักษณะเฉพาะของแต่ละปุ่ม
รูปที่ 1 คอมโพเนนต์ปุ่ม 5 ปุ่ม

แพลตฟอร์ม API

onClick
ฟังก์ชันที่ระบบเรียกใช้เมื่อผู้ใช้กดปุ่ม
enabled
เมื่อ false พารามิเตอร์นี้จะทำให้ปุ่มปรากฏเป็นใช้งานไม่ได้และ ไม่ทำงาน
colors
อินสแตนซ์ของ ButtonColors ที่กำหนดสีที่ใช้ใน ปุ่ม
contentPadding
ระยะห่างจากขอบในภายในปุ่ม

ปุ่มแบบเติมสี

คอมโพเนนต์ปุ่มแบบเติมสีใช้ Composable Button พื้นฐาน โดยค่าเริ่มต้น จะมีการเติมสีทึบ ข้อมูลโค้ดแสดงวิธีใช้ คอมโพเนนต์

@Composable
fun FilledButtonExample(onClick: () -> Unit) {
    Button(onClick = { onClick() }) {
        Text("Filled")
    }
}
Button.kt

การติดตั้งใช้งานนี้จะปรากฏดังที่แสดง

ปุ่มแบบเติมสีที่มีพื้นหลังสีม่วงซึ่งเขียนว่า "เติมแล้ว"
รูปที่ 2 ปุ่มแบบเติมสี

ปุ่มโทนสีแบบเติม

คอมโพเนนต์ปุ่มแบบเติมสีโทนัลใช้คอมโพสได้ FilledTonalButton โดยจะเติมสีตามโทนสีให้โดยค่าเริ่มต้น

ข้อมูลโค้ดแสดงวิธีติดตั้งใช้งานคอมโพเนนต์

@Composable
fun FilledTonalButtonExample(onClick: () -> Unit) {
    FilledTonalButton(onClick = { onClick() }) {
        Text("Tonal")
    }
}
Button.kt

การติดตั้งใช้งานนี้จะปรากฏดังที่แสดง

ปุ่มสีเดียวกันที่มีพื้นหลังสีม่วงอ่อนซึ่งมีข้อความว่า "สีเดียวกัน"
รูปที่ 3 ปุ่มสี

ปุ่มแบบเติมขอบ

คอมโพเนนต์ปุ่มแบบมีเส้นขอบใช้ Composable OutlinedButton โดยจะ แสดงพร้อมกับเส้นขอบโดยค่าเริ่มต้น

ข้อมูลโค้ดแสดงวิธีติดตั้งใช้งานคอมโพเนนต์

@Composable
fun OutlinedButtonExample(onClick: () -> Unit) {
    OutlinedButton(onClick = { onClick() }) {
        Text("Outlined")
    }
}
Button.kt

การติดตั้งใช้งานนี้จะปรากฏดังที่แสดง

ปุ่มแบบเติมขอบโปร่งใสที่มีเส้นขอบสีเข้มซึ่งเขียนว่า "แบบเติมขอบ"
รูปที่ 4 ปุ่มแบบเติมขอบ

ปุ่มแบบยกขึ้น

คอมโพเนนต์ปุ่มแบบยกใช้ Composable ElevatedButton มี เงาที่แสดงถึงเอฟเฟกต์ระดับความสูงโดยค่าเริ่มต้น เป็นปุ่มแบบเติมสี ที่มีเงา

ข้อมูลโค้ดแสดงวิธีติดตั้งใช้งานคอมโพเนนต์

@Composable
fun ElevatedButtonExample(onClick: () -> Unit) {
    ElevatedButton(onClick = { onClick() }) {
        Text("Elevated")
    }
}
Button.kt

การติดตั้งใช้งานนี้จะปรากฏดังที่แสดง

ปุ่มแบบยกขึ้นที่มีพื้นหลังสีเทาซึ่งเขียนว่า "ยกขึ้น"
รูปที่ 5 ปุ่มแบบยกขึ้น

ปุ่มข้อความ

คอมโพเนนต์ปุ่มข้อความใช้ Composable TextButton โดยจะปรากฏเป็น ข้อความเท่านั้นจนกว่าจะกด โดยค่าเริ่มต้นจะไม่มีการเติมสีหรือเส้นขอบ

ข้อมูลโค้ดแสดงวิธีติดตั้งใช้งานคอมโพเนนต์

@Composable
fun TextButtonExample(onClick: () -> Unit) {
    TextButton(
        onClick = { onClick() }
    ) {
        Text("Text Button")
    }
}
Button.kt

การติดตั้งใช้งานนี้จะปรากฏดังที่แสดง

ปุ่มข้อความที่ระบุว่า "ปุ่มข้อความ"
รูปที่ 6 ปุ่มข้อความ

แหล่งข้อมูลเพิ่มเติม