ปุ่มใน 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)

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

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

ภาค คำอธิบาย

คอนเทนเนอร์

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

ป้ายกำกับ

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

ไอคอน (ไม่บังคับ)

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

ขนาด

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

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

ปานกลาง

48.dp

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

ใหญ่

72.dp

การดำเนินการที่เน้นสูงหรือจุดเริ่มต้นของหน้าจอหลัก

รัฐ

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

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

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

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

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

ตัวอย่าง: ปุ่มที่มีข้อความ

โค้ดต่อไปนี้จะสร้างปุ่มมาตรฐานที่มีข้อความ

@Composable
fun ButtonSample() {
    Button(onClick = {}) { Text("Send") }
}

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

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

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

@Composable
fun ButtonWithLeadingIconSample() {
    Button(onClick = {}, leadingIcon = { Icon(FavoriteIcon, "Localized description") }) {
        Text("Send")
    }
}