Фигуры в Jetpack Compose Glimmer

Поддерживаемые XR-устройства

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

Подробнее о типах XR-устройств

Подробнее о типах XR-устройств

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

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

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

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