Shapes in Jetpack Compose Glimmer

Применимые устройства XR

Данное руководство поможет вам создавать приложения для устройств XR такого типа.

Узнайте о типах устройств XR →

Узнайте о типах устройств XR →

В Jetpack Compose Glimmer для определения визуальных границ и степени закругления поверхностей используются фигуры. Класс Shapes предоставляет различные уровни закругления, предназначенные для разных типов компонентов.

Категории форм

Класс GlimmerTheme определяет три стандартных размера фигур:

• Маленький : фигура с четырьмя одинаковыми углами. Используется для таких элементов, как открытки. По умолчанию это фигура RoundedCornerShape размером 24.dp.
• Средний размер : фигура с четырьмя одинаковыми углами, размер которых находится между малым и большим. Это наиболее часто используемая фигура, и она используется по умолчанию в Surface. По умолчанию это фигура RoundedCornerShape размером 36.dp.
• Большой : Фигура с четырьмя полностью закругленными углами. Эта фигура используется для таких элементов, как кнопки. По умолчанию это 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)
    }
}
ShapesSamples.kt

Настройте формы

Класс 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")
    }
}
ShapesSamples.kt

Значения по умолчанию

Если в настройках GlimmerTheme не указано иное, система по умолчанию использует следующие значения: