ไอคอนใน Glimmer ของ Jetpack Compose

อุปกรณ์ XR ที่ใช้ได้

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

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

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

ใน Jetpack Compose Glimmer คอมโพเนนต์ Icon ออกแบบมาโดยเฉพาะ สำหรับการแสดงผลไอคอนสีเดียว Icon สามารถรับ ImageVector ImageBitmap หรือ Painter เป็นแหล่งที่มาได้ Icon ซึ่งคล้ายกับ Text สามารถใช้สีอย่างชาญฉลาดตามธีม UI โดยรอบ แม้ว่าค่าเริ่มต้นจะเป็นขนาดที่ LocalIconSize ระบุไว้ แต่คุณก็ตั้งค่าขนาดไอคอนที่กำหนดเองได้ด้วย

ตัวอย่าง: สร้างกล่องที่มีไอคอนดาวขนาดใหญ่

@Composable
fun GlimmerIconSample() {
    GlimmerTheme {
        Box(
            modifier = Modifier.fillMaxSize(),
            contentAlignment = Alignment.Center
        ) {
            Column(horizontalAlignment = Alignment.CenterHorizontally) {
                Icon(
                    painter = painterResource(id = R.drawable.ic_star),
                    contentDescription = "A star icon from Google Symbols",
                    modifier = Modifier.size(GlimmerTheme.iconSizes.large),
                    tint = GlimmerTheme.colors.primary
                )
            }
        }
    }
}

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

• แหล่งที่มาของไอคอนจะโหลด Vector Drawable XML ในเครื่อง (R.drawable.ic_star) โดยใช้ painterResource ซึ่งแสดงให้เห็นแนวทางที่แนะนำสำหรับ การผสานรวมไอคอนเข้ากับ UI ของ Jetpack Compose Glimmer โดยไม่มีค่าใช้จ่ายเพิ่มเติมของไลบรารีภายนอก
• ขนาดของไอคอนได้รับการปรับแต่งโดยการตั้งค่า GlimmerTheme.iconSizes.large ด้วยตัวแก้ไข ซึ่งแสดงวิธีลบล้างการกำหนดขนาดที่กำหนดไว้ล่วงหน้าของ Glimmer ใน Jetpack Compose
• คุณปรับแต่งสีของไอคอนได้โดยการตั้งค่า GlimmerTheme.colors.primary โดยใช้พารามิเตอร์สี เพื่อใช้ การปรับสีไอคอนแบบสีเดียวเพื่อความสอดคล้องด้านภาพ