อุปกรณ์ XR ที่ใช้ได้
คำแนะนำนี้จะช่วยให้คุณสร้างประสบการณ์การใช้งานสำหรับอุปกรณ์ XR ประเภทต่างๆ เหล่านี้ได้
ใน Jetpack Compose Glimmer คอมโพเนนต์ Button เป็นคอมโพเนนต์แบบอินเทอร์แอกทีฟ
ที่ได้รับการเพิ่มประสิทธิภาพสำหรับการป้อนข้อมูลแว่นตา AI โดยจะให้ความคิดเห็นด้วยภาพที่ชัดเจน
สำหรับสถานะที่เปิดใช้ วางเมาส์เหนือ และกด เพื่อแนะนำการดำเนินการของผู้ใช้
ตัวอย่าง: รูปแบบปุ่ม
@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 มาตรฐานโดยไม่ต้องใช้ตัวแก้ไขขนาดที่ชัดเจน