Jetpack Compose Glimmer 中的形状

适用的 XR 设备

本指南可帮助您为以下类型的 XR 设备打造优质体验。

了解 XR 设备类型 →

显示眼镜

了解 XR 设备类型 →

在 Jetpack Compose Glimmer 中，界面使用形状来定义其视觉 边界和圆角程度。The Shapes 类提供了不同级别的 圆角，适用于各种类型的组件。

图 1.Jetpack Compose Glimmer 中大、中、小形状的示例。

形状类别

The GlimmerTheme 类定义了三种标准形状大小：

• 小：具有四个相同大小的角的形状。它用于卡片等组件。默认情况下，这是一个 24.dp 的 RoundedCornerShape。
• 中：具有四个相同大小的角，大小介于小和 大之间的形状。这是最常用的形状，也是界面中使用的默认形状。默认情况下，这是一个 36.dp 的 RoundedCornerShape。
• 大：具有四个完全圆角的形状。此形状用于按钮等组件。默认情况下，这是一个 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 中另行指定，系统会默认使用以下值：

令牌	默认形状	大小或半径
small	RoundedCornerShape	24.dp
medium	RoundedCornerShape	36.dp
large	CircleShape	完全圆角