ปุ่มใน Jetpack Compose Glimmer

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

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

รูปที่ 1 ตัวอย่างปุ่มรูปแบบต่างๆ ใน Jetpack Compose Glimmer

ตัวอย่าง: รูปแบบปุ่ม

@Composable
fun GlimmerButtonExample() {
    Column(
        verticalArrangement = Arrangement.spacedBy(16.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = Modifier.fillMaxWidth()
    ) {
        // Basic Button
        Button(onClick = { /* Do something */ }) {
            Text("Test Button 1")
        }

        // Button with a leading icon
        Button(
            onClick = { /* Do something */ },
            leadingIcon = {
                Icon(
                    painter = painterResource(id = R.drawable.ic_favorite),
                    contentDescription = "Favorite icon"
                )
            }
        ) {
            Text("Test Button 2")
        }

        // Button with leading and trailing icons
        Button(
            onClick = { /* Do something */ },
            leadingIcon = {
                Icon(
                    painter = painterResource(id = R.drawable.ic_favorite),
                    contentDescription = "Favorite icon"
                )
            },
            trailingIcon = {
                Icon(
                    painter = painterResource(id = R.drawable.ic_favorite),
                    contentDescription = "Favorite icon"
                )
            }
        ) {
            Text("Test Button 3")
        }
    }
}

ประเด็นสำคัญเกี่ยวกับโค้ด

  • ไอคอนปุ่มมาจากภาพเวกเตอร์ XML ในเครื่อง (R.drawable.ic_favorite) โดยใช้ painterResource ซึ่งแทนที่ Icons.Default การอ้างอิงไลบรารีสำหรับการโหลดชิ้นงานที่เพิ่มประสิทธิภาพ
  • พารามิเตอร์ leadingIcon และ trailingIcon จะใช้เพื่อแทรกไอคอน Composables ลงในเลย์เอาต์ปุ่ม ซึ่งแสดงให้เห็นว่า Jetpack Compose Glimmer รองรับการวางตำแหน่งไอคอนที่ยืดหยุ่น
  • ปุ่มใช้การกำหนดค่าการปรับขนาดเริ่มต้น ซึ่งจะจัดการระยะห่างภายในและการปรับขนาดข้อความโดยอัตโนมัติเพื่อให้สอดคล้องกับข้อกำหนดการออกแบบ Glimmer ของ Jetpack Compose มาตรฐานโดยไม่ต้องใช้ตัวแก้ไขขนาดที่ชัดเจน