ปุ่มใน Jetpack Compose Glimmer

อุปกรณ์ XR ที่รองรับ

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

ดูข้อมูลเกี่ยวกับประเภทอุปกรณ์ XR →

แว่นตา AI

ดูข้อมูลเกี่ยวกับประเภทอุปกรณ์ XR →

ใน 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")
        }
    }
}

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

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