Jetpack Compose Glimmer 中的形状

适用的 XR 设备
本指南可帮助您为以下类型的 XR 设备打造优质体验。
了解 XR 设备类型 →
展示眼镜
了解 XR 设备类型 →

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

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

形状类别

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

  • 小：具有四个相同大小的边角的形状。它用于卡片等组件。默认情况下，此值为 24.dp 的 RoundedCornerShape。
  • 中等：一种具有四个相同大小的角且尺寸介于小和大之间的形状。这是最常用的形状，也是 surface 中使用的默认形状。默认情况下，此值为 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) }
    }
}

@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

完全圆角