Hình dạng trong Jetpack Compose Glimmer

Các thiết bị XR được hỗ trợ

Hướng dẫn này giúp bạn xây dựng các trải nghiệm cho những loại thiết bị XR sau.

Tìm hiểu về các loại thiết bị XR →

Tìm hiểu về các loại thiết bị XR →

Trong Jetpack Compose Glimmer, các nền tảng sử dụng hình dạng để xác định ranh giới trực quan và độ tròn của chúng. Lớp Shapes cung cấp nhiều mức độ bo tròn dành cho nhiều loại thành phần.

Danh mục hình dạng

Lớp GlimmerTheme xác định 3 kích thước hình dạng tiêu chuẩn:

• Nhỏ: Hình dạng có 4 góc bằng nhau. Được dùng cho các thành phần như thẻ. Theo mặc định, đây là RoundedCornerShape của 24.dp.
• Trung bình: Hình dạng có 4 góc có cùng kích thước, nằm giữa kích thước nhỏ và lớn. Đây là hình dạng thường dùng nhất và là hình dạng mặc định được dùng trong bề mặt. Theo mặc định, đây là RoundedCornerShape của 36.dp.
• Lớn: Hình dạng có 4 góc bo tròn hoàn toàn. Hình dạng này được dùng cho các thành phần như nút. Theo mặc định, đây là CircleShape.

Ví dụ: Lấy hình dạng từ GlimmerTheme và áp dụng cho các thành phần

Trước tiên, hãy lấy các hình dạng đã xác định từ GlimmerTheme.shapes, sau đó áp dụng những hình dạng đó cho một số thành phần:

@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)
    }
}
ShapesSamples.kt

Tuỳ chỉnh hình dạng

Lớp Shapes là @Immutable. Bạn có thể tạo bản sao của các hình dạng chủ đề hiện có và ghi đè các giá trị cụ thể bằng cách sử dụng hàm sao chép. Hãy làm như vậy để duy trì cấu trúc của giao diện trong khi điều chỉnh các bán kính cụ thể cho thương hiệu của ứng dụng.

Ví dụ: Ghi đè các giá trị hình dạng cụ thể

Đoạn mã sau đây ghi đè các giá trị hình dạng cụ thể:

@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")
    }
}
ShapesSamples.kt

Giá trị mặc định

Nếu không được chỉ định trong GlimmerTheme, hệ thống sẽ mặc định sử dụng các giá trị sau: