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

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

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

รูปที่ 1 ตัวอย่างรูปร่างขนาดใหญ่ กลาง และเล็กใน Jetpack Compose Glimmer

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

คลาส 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) }
    }
}

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

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

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

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

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

@Composable
fun CustomShapesSample() {
    val customShapes = GlimmerTheme.shapes.copy(
        small = RoundedCornerShape(12.dp),
        medium = RoundedCornerShape(20.dp)
    )

    val interactionSource = remember { MutableInteractionSource() }
    Box(
        Modifier
            .aspectRatio(2.5f)
            .fillMaxWidth()
            .surface(interactionSource = interactionSource, shape = customShapes.small),
        contentAlignment = Alignment.Center,
    ) {
        Text("custom small")
    }
}

ค่าเริ่มต้น

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

โทเค็น รูปร่างเริ่มต้น ขนาดหรือรัศมี

small

RoundedCornerShape

24.dp

medium

RoundedCornerShape

36.dp

large

CircleShape

โค้งมนเต็มรูปแบบ