Sugerencias y precauciones con los estilos

En esta página, se describen las prácticas recomendadas para trabajar con estilos que logran coherencia en todo tu código base, así como los principios que seguimos al diseñar las APIs.

Sugerencias

Sigue estas prácticas recomendadas:

Qué hacer: Usa estilos para los elementos visuales y modificadores para los comportamientos

Usa la API de Styles para la configuración visual (fondos, padding, bordes) y reserva los modificadores para los comportamientos, como la lógica de clics, la detección de gestos o la accesibilidad.

Qué hacer: Exponer parámetros de diseño en sistemas de diseño

En el caso de tus propios componentes personalizados del sistema de diseño, debes exponer un objeto Style después del parámetro del modificador.

@Composable
fun GradientButton(
    modifier: Modifier = Modifier,
    // ✅ DO: for design system components, expose a style modifier to consumers to be able to customize the components
    style: Style = Style
) {
    // Consume the style
}
DosDonts.kt

Qué hacer: Reemplaza los parámetros basados en elementos visuales por un objeto Style

Considera reemplazar los parámetros de tus elementos componibles por un solo parámetro Style. Por ejemplo:

// Before
@Composable
fun OldButton(background: Color, fontColor: Color) {
}

// After
// ✅ DO: Replace visual-based parameters with a style that includes same properties
@Composable
fun NewButton(style: Style = Style) {
}
DosDonts.kt

Prioriza los estilos para las animaciones

Usa el bloque animate integrado para el diseño basado en el estado con animaciones para obtener mejoras en el rendimiento en comparación con los modificadores.

Qué hacer: Aprovecha la función "Last-write-wins"

Aprovecha el hecho de que las propiedades style se reemplazan en lugar de apilarse. Úsalo para anular los bordes o los fondos de los componentes predeterminados sin necesidad de usar varios parámetros.

Lo que no debes hacer

No se recomiendan los siguientes patrones:

No uses estilos para la lógica de interacción.

No intentes controlar la detección de onClick o de gestos dentro de un estilo. Los estilos se limitan a configuraciones visuales basadas en el estado, por lo que no deben controlar la lógica de negocios. En cambio, solo deben tener un aspecto visual diferente según el estado.

No: Proporciona un estilo predeterminado como parámetro predeterminado

Los parámetros de diseño siempre se deben declarar con style: Style = Style:

@Composable
fun BadButton(
    modifier: Modifier = Modifier,
    // ❌ DON'T set a default style here as a parameter
    style: Style = Style { background(Color.Red) }
) {
}
DosDonts.kt

Para incluir un parámetro "predeterminado", combina el estilo del parámetro entrante con el valor predeterminado definido:

@Composable
fun GoodButton(
    modifier: Modifier = Modifier,
    // ✅ Do: always pass it as a Style, do not pass other defaults
    style: Style = Style
) {
    // ...
    val defaultStyle = Style { background(Color.Red) }
    // ✅ Do Combine defaults inside with incoming parameter
    Box(modifier = modifier.styleable(styleState, defaultStyle, style)) {
      // your logic
    }
}
DosDonts.kt

No: Proporciona parámetros de diseño a elementos componibles basados en el diseño

Si bien puedes proporcionar un estilo a cualquier elemento componible, no se espera que los elementos componibles basados en el diseño o los elementos componibles a nivel de la pantalla acepten un estilo, ya que no está claro desde el punto de vista del consumidor qué haría un estilo en este nivel. Los estilos están diseñados para los componentes, no necesariamente para los diseños.