ปุ่มใน Jetpack Compose Glimmer

อุปกรณ์ XR ที่รองรับ
คำแนะนำนี้จะช่วยคุณสร้างประสบการณ์การใช้งานสำหรับอุปกรณ์ XR ประเภทต่างๆ
ดูข้อมูลเกี่ยวกับประเภทอุปกรณ์ XR →
แว่นตา Display
ดูข้อมูลเกี่ยวกับประเภทอุปกรณ์ XR →

ใน Jetpack Compose Glimmer นั้น Button เป็นคอมโพเนนต์แบบโต้ตอบที่ปรับให้เหมาะกับการป้อนข้อมูลด้วยแว่นตา Display โดยจะแสดงผลลัพธ์ที่ชัดเจนผ่านสถานะต่างๆ เพื่อแนะนำการดำเนินการของผู้ใช้

ปุ่มสร้างขึ้นบนระบบ พื้นผิวของ Jetpack Compose Glimmer ซึ่ง จะจัดการพร็อพเพอร์ตี้ทางกายภาพ เช่น เส้นขอบและความลึกโดยอัตโนมัติ

ปุ่มมาตรฐานจะมีป้ายกำกับข้อความและไอคอนที่ไม่บังคับ คุณสามารถใช้ปุ่มนี้สำหรับการดำเนินการหลักหรือรองก็ได้ นอกจากนี้ยังมีปุ่มเฉพาะทาง เช่น ปุ่มไอคอนและปุ่มสลับ ซึ่งกำหนดเป็นคอมโพเนนต์แยกต่างหากใน Jetpack Compose Glimmer

ค่าเริ่มต้น

ตัวอย่างปุ่มสไตล์ต่างๆ ใน Jetpack Compose Glimmer ตัวอย่างเหล่านี้แสดงปุ่มขนาดกลางที่มีสถานะปุ่ม 3 สถานะ ได้แก่ เปิดใช้ (1), โฟกัส (2) และกด (3)

ใหญ่

ตัวอย่างปุ่มสไตล์ต่างๆ ใน Jetpack Compose Glimmer ตัวอย่างเหล่านี้แสดงปุ่มขนาดใหญ่ที่มีสถานะปุ่ม 3 สถานะ ได้แก่ เปิดใช้ (1), โฟกัส (2) และกด (3)

กายวิภาคศาสตร์

ปุ่มประกอบด้วยคอนเทนเนอร์และป้ายกำกับ รวมถึงไอคอนนำและไอคอนต่อท้ายที่ไม่บังคับ

ภาค คำอธิบาย

คอนเทนเนอร์

พื้นผิวพื้นหลังของปุ่ม

ป้ายกำกับ

ข้อความอธิบายการดำเนินการ

Icon (optional)

ตัวบ่งชี้ภาพนำหรือต่อท้าย

ขนาด

ปุ่ม Jetpack Compose Glimmer รองรับปุ่ม 2 ขนาด ซึ่งจะส่งผลต่อความสูงขั้นต่ำและระยะห่างจากขอบภายใน

ขนาด ความสูงขั้นต่ำ การใช้เริ่มต้น

ปานกลาง

48.dp

การดำเนินการและรายการมาตรฐาน (ค่าเริ่มต้น)

ใหญ่

72.dp

การดำเนินการที่เน้นเป็นพิเศษหรือจุดเริ่มต้นของหน้าจอหลัก

รัฐ

ปุ่มใน Jetpack Compose Glimmer จะเปลี่ยนลักษณะที่ปรากฏเพื่อสื่อสารสถานะ

  • เปิดใช้: สถานะเริ่มต้นของปุ่มแบบโต้ตอบ
  • โฟกัส: เมื่อโฟกัส ปุ่มจะใช้ GlimmerTheme.depthEffectLevels.level1 และไฮไลต์เส้นขอบที่โฟกัส
  • กด: เมื่อเปิดใช้งาน ระบบจะใช้การวางซ้อนสีขาวแบบกึ่งโปร่งใสกับ พื้นผิว
  • ปิดใช้: ปุ่มจะไม่ตอบสนองต่ออินพุตและลักษณะที่ปรากฏ จะได้รับการปรับ

ค่าเริ่มต้นของปุ่ม

ค่าเริ่มต้นต่อไปนี้ใช้กับปุ่มมาตรฐาน

  • โดยค่าเริ่มต้น ปุ่มจะใช้ GlimmerTheme.typography.bodySmall ตรวจสอบว่าข้อความภายในปุ่มกระชับและอธิบายการดำเนินการได้อย่างชัดเจน
  • รูปร่างเริ่มต้นของปุ่มคือ GlimmerTheme.shapes.large การปัดเศษที่สอดคล้องกันนี้จะช่วยให้ผู้ใช้ระบุปุ่มในอินเทอร์เฟซของแว่นตาที่มีจอแสดงผลได้

ตัวอย่าง: ปุ่มที่มีข้อความและไอคอน

ปุ่มพื้นฐานจะมีเพียงป้ายกำกับข้อความ แต่คุณยังเพิ่มไอคอนที่จุดเริ่มต้น (โดยใช้ leadingIcon) หรือจุดสิ้นสุด (โดยใช้ trailingIcon) ของข้อความเพื่อเพิ่มบริบทได้ด้วย

โค้ดต่อไปนี้สร้างปุ่มที่มีทั้งไอคอนนำและไอคอนต่อท้าย

Button(
    onClick = { /* Handle navigation or action */ },
    leadingIcon = { Icon(FavoriteIcon, contentDescription = null) },
    trailingIcon = { Icon(SendIcon, contentDescription = null) }
) {
    Text("Text Label", style = GlimmerTheme.typography.titleSmall)
}

กลุ่มปุ่ม

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

ตัวอย่างฟีเจอร์การเลื่อนและการโฟกัสของกลุ่มปุ่ม

ตัวอย่าง: กลุ่มปุ่ม

ButtonGroup(modifier = Modifier.fillMaxWidth()) {
    Button(onClick = {}) { Text("Button 1") }
    Button(onClick = {}) { Text("Button 2") }
    Button(onClick = {}) { Text("Button 3") }
    Button(onClick = {}) { Text("Button 4") }
    Button(onClick = {}) { Text("Button 5") }
}

การควบคุมโฟกัสในกลุ่มปุ่ม

คุณสามารถย้ายโฟกัสไปยังปุ่มใดก็ได้ในกลุ่มเพื่อควบคุมการเลือกด้วยตนเอง

ปรับแต่งและควบคุมลักษณะการเลื่อนโดยใช้สถานะ ButtonGroup ดังนี้

  1. ประกาศสถานะด้วย rememberButtonGroupState
  2. ส่งไปยังฟังก์ชันที่ประกอบกันได้ ButtonGroup
  3. เรียก animateScrollToItem (หรือ scrollToItem สำหรับการเลื่อนทันที ) เพื่อเลื่อนไปยังรายการที่เฉพาะเจาะจงและย้ายโฟกัสไปยังรายการนั้นโดยอัตโนมัติ

โค้ดต่อไปนี้จะย้ายโฟกัสจากปุ่มหนึ่งไปยังอีกปุ่มหนึ่งเมื่อคลิก

val scope = rememberCoroutineScope()
val state = rememberButtonGroupState()
ButtonGroup(modifier = Modifier.fillMaxWidth(), state = state) {
    Button(onClick = { scope.launch { state.animateScrollToItem(1) } }) {
        Text("Select last item")
    }
    Button(onClick = { scope.launch { state.animateScrollToItem(0) } }) {
        Text("Select first item")
    }
}