ใน Jetpack Compose Glimmer พื้นผิว จะใช้รูปร่างเพื่อกำหนดขอบเขตภาพ
และความโค้งมน คลาส 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) } } } @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 ระบบจะใช้ค่าเริ่มต้นต่อไปนี้
| โทเค็น | รูปร่างเริ่มต้น | ขนาดหรือรัศมี |
|---|---|---|
|
|
24.dp |
|
|
36.dp |
|
|
โค้งมนเต็มรูปแบบ |