ปุ่มไอคอนใน Jetpack Compose Glimmer

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

ใน Jetpack Compose Glimmer นั้น IconButton เป็นคอมโพเนนต์แบบอินเทอร์แอกทีฟขนาดกะทัดรัด ที่ใช้เพื่อแสดงการทำงานเสริมด้วยการแตะเพียงครั้งเดียว

ปุ่มไอคอนจะปรากฏเล็กกว่าปุ่มมาตรฐาน แต่ยังคงขอบเขตทางกายภาพไว้เพื่อให้มั่นใจว่ามีการโต้ตอบได้ง่ายบนแว่นตา Display

นอกจากนี้ยังมีปุ่มมาตรฐานและปุ่ม สลับสำหรับกรณีการใช้งานอื่นๆ ด้วย

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

ขนาดและมิติข้อมูล

องค์ประกอบ มิติข้อมูล

ขนาดคอนเทนเนอร์ขั้นต่ำ

48 x 48 dp

ขนาดไอคอนภายใน

32 x 32 dp

ระยะห่างจากขอบเริ่มต้นของเนื้อหา

GlimmerTheme.componentSpacingValues.small

สถานะ

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

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

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

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

  • รูปร่าง: ค่าเริ่มต้นคือ GlimmerTheme.shapes.large (โดยปกติจะเป็น วงกลม)
  • สี: ค่าเริ่มต้นคือ GlimmerTheme.colors.surface
  • สีเนื้อหา: คำนวณจากสีพื้นหลังโดยอัตโนมัติ เว้นแต่จะ ระบุไว้อย่างชัดเจน
  • ระยะห่างจากขอบของเนื้อหา: กำหนดระยะห่างเริ่มต้นระหว่างไอคอนกับขอบคอนเทนเนอร์
  • ขนาดขั้นต่ำ: ค่า 48.dp คงที่เพื่อป้องกันไม่ให้ปุ่มมีขนาดเล็กเกินไปจนโต้ตอบไม่ได้
  • ขนาดไอคอน: ค่าเริ่มต้นคือ GlimmerTheme.iconSizes.small (32.dp)

ตัวอย่าง: ปุ่มไอคอน

โค้ดต่อไปนี้จะสร้างปุ่มไอคอนที่มีลักษณะเริ่มต้น

@Composable
fun IconButtonSample() {
    IconButton(onClick = {}) { Icon(FavoriteIcon, "Localized description") }
}