Button

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

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

แพลตฟอร์ม API

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

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

คอมโพเนนต์ปุ่มเติมโฆษณาใช้ Button Composable พื้นฐาน โดยค่าเริ่มต้น รูปภาพจะเติมด้วยสีพื้น ข้อมูลโค้ดต่อไปนี้แสดงวิธีใช้คอมโพเนนต์

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ปุ่มข้อความ

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

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

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

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

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

• ปุ่มการทำงานแบบลอย
• เอกสาร UI เนื้อหา