รูปร่างใน Glimmer ของ Jetpack Compose

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

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

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

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

ใน Jetpack Compose Glimmer Surface จะใช้รูปร่างเพื่อกำหนดขอบเขตภาพ และความโค้งมน คลาส Shapes มีระดับความโค้งมนที่แตกต่างกันสำหรับคอมโพเนนต์ประเภทต่างๆ

หมวดหมู่รูปร่าง

คลาส GlimmerTheme จะกำหนดขนาดรูปร่างมาตรฐาน 3 ขนาด ดังนี้

• เล็ก: รูปทรงที่มีมุม 4 มุมขนาดเท่ากัน ใช้กับคอมโพเนนต์ เช่น การ์ด โดยค่าเริ่มต้น ค่านี้คือ RoundedCornerShape ของ 24.dp
• ปานกลาง: รูปร่างที่มีมุม 4 มุมขนาดเท่ากันซึ่งมีขนาดอยู่ระหว่างเล็กและ ใหญ่ นี่คือรูปร่างที่ใช้กันโดยทั่วไปและเป็นค่าเริ่มต้นที่ใช้ในแพลตฟอร์ม โดยค่าเริ่มต้นจะเป็น RoundedCornerShape ของ 36.dp
• ใหญ่: รูปทรงที่มีมุมโค้งมนทั้ง 4 มุม รูปร่างนี้ใช้กับ คอมโพเนนต์ต่างๆ เช่น ปุ่ม โดยค่าเริ่มต้นจะเป็น CircleShape

ตัวอย่าง: รับรูปร่างจาก GlimmerTheme และนำไปใช้กับคอมโพเนนต์

ก่อนอื่น ให้รับรูปร่างที่กำหนดจาก GlimmerTheme.shapes ดังนี้

@Composable
fun ShapesSample() {
    val shapes = GlimmerTheme.shapes
    GlimmerLazyColumn {
        item { ShapeItem("small", shape = shapes.small) }
        item { ShapeItem("medium", shape = shapes.medium) }
        item { ShapeItem("large", shape = shapes.large) }
    }
}
ShapesSamples.kt

จากนั้นคุณจะใช้รูปร่างเหล่านี้กับคอมโพเนนต์บางอย่างได้ ดังนี้

@Composable
private fun ShapeItem(name: String, shape: Shape, modifier: Modifier = Modifier) {
    Box(
        modifier.aspectRatio(2.5f).fillMaxWidth().surface(shape = shape),
        contentAlignment = Alignment.Center,
    ) {
        Text(name)
    }
}
ShapesSamples.kt

ปรับแต่งรูปร่าง

ชั้นเรียน Shapes คือ @Immutable คุณสามารถคัดลอกธีม รูปร่างที่มีอยู่และลบล้างค่าที่เฉพาะเจาะจงได้โดยใช้ฟังก์ชันคัดลอก ทำเช่นนี้เพื่อรักษาโครงสร้างของธีมไว้ขณะปรับรัศมีที่เฉพาะเจาะจงสำหรับแบรนด์ของแอป

ตัวอย่าง: ลบล้างค่ารูปร่างที่เฉพาะเจาะจง

โค้ดต่อไปนี้จะลบล้างค่ารูปร่างที่เฉพาะเจาะจง

val customShapes = GlimmerTheme.shapes.copy(
    small = RoundedCornerShape(12.dp),
    medium = RoundedCornerShape(20.dp)
)

ค่าเริ่มต้น

หากไม่ได้ระบุไว้เป็นอย่างอื่นใน GlimmerTheme ระบบจะใช้ค่าเริ่มต้นต่อไปนี้