Sobre o WindowInsetsRulers

WindowInsets é a API padrão no Jetpack Compose para processar áreas da tela que estão parcial ou totalmente obscurecidas pela interface do sistema. Essas áreas incluem a barra de status, a barra de navegação e o teclado na tela. Você também pode transmitir WindowInsetsRulers predefinidos, como SafeDrawing, para Modifier.fitInside ou Modifier.fitOutside, e alinhar seu conteúdo com as barras de sistema e o corte da tela ou criar WindowInsetsRulers personalizados.

Vantagens do WindowInsetsRulers

• Evita a complexidade de consumo: opera durante a fase de posicionamento do layout. Isso significa que ele ignora completamente a cadeia de consumo de encartes e sempre pode fornecer as posições corretas e absolutas das barras de sistema e dos cortes da tela, independente do que os layouts principais fizeram. Usar os métodos Modifier.fitInside ou Modifier.fitOutside ajuda a corrigir problemas quando elementos combináveis ancestrais consomem insets incorretamente.
• Evite facilmente as barras de sistema: ajuda o conteúdo do app a evitar as barras de sistema e o corte da tela, além de ser mais simples do que usar WindowInsets diretamente.
• Altamente personalizável: os desenvolvedores podem alinhar o conteúdo a réguas personalizadas e ter controle preciso sobre os layouts com layouts personalizados.

Desvantagens do WindowInsetsRulers

• Não pode ser usado para medição: como opera durante a fase de posicionamento, as informações de posição que ele fornece não estão disponíveis durante a fase de medição anterior.
• Potencial de instabilidade de layout: isso pode causar falhas se o tamanho de um layout pai depender do tamanho dos filhos. Como um elemento secundário que usa WindowInsetsRulers pode mudar de posição ou tamanho durante o posicionamento, ele pode criar um ciclo de layout instável.

Criar WindowInsetsRulers personalizado

É possível alinhar o conteúdo a réguas personalizadas. Por exemplo, considere o caso de uso em que um elemento combinável principal processa encartes de maneira inadequada, causando problemas de padding em um elemento filho downstream. Embora esse problema possa ser resolvido de outras maneiras, incluindo o uso de Modifier.fitInside, também é possível criar uma régua personalizada para alinhar precisamente o elemento combinável filho sem precisar corrigir o problema no elemento pai upstream, conforme mostrado no exemplo e no vídeo a seguir:

@Composable
fun WindowInsetsRulersDemo(modifier: Modifier) {
    Box(
        contentAlignment = BottomCenter,
        modifier = modifier
            .fillMaxSize()
            // The mistake that causes issues downstream, as .padding doesn't consume insets.
            // While it's correct to instead use .windowInsetsPadding(WindowInsets.navigationBars),
            // assume it's difficult to identify this issue to see how WindowInsetsRulers can help.
            .padding(WindowInsets.navigationBars.asPaddingValues())
    ) {
        TextField(
            value = "Demo IME Insets",
            onValueChange = {},
            modifier = modifier
                // Use alignToSafeDrawing() instead of .imePadding() to precisely place this child
                // Composable without having to fix the parent upstream.
                .alignToSafeDrawing()

            // .imePadding()
            // .fillMaxWidth()
        )
    }
}

fun Modifier.alignToSafeDrawing(): Modifier {
    return layout { measurable, constraints ->
        if (constraints.hasBoundedWidth && constraints.hasBoundedHeight) {
            val placeable = measurable.measure(constraints)
            val width = placeable.width
            val height = placeable.height
            layout(width, height) {
                val bottom = WindowInsetsRulers.SafeDrawing.current.bottom
                    .current(0f).roundToInt() - height
                val right = WindowInsetsRulers.SafeDrawing.current.right
                    .current(0f).roundToInt()
                val left = WindowInsetsRulers.SafeDrawing.current.left
                    .current(0f).roundToInt()
                measurable.measure(Constraints.fixed(right - left, height))
                    .place(left, bottom)
            }
        } else {
            val placeable = measurable.measure(constraints)
            layout(placeable.width, placeable.height) {
                placeable.place(0, 0)
            }
        }
    }
}
InsetsSnippets.kt

O vídeo a seguir mostra um exemplo de consumo problemático de encarte do IME causado por um elemento pai upstream na imagem à esquerda e usando réguas personalizadas para corrigir o problema à direita. Um padding extra é mostrado abaixo do TextField Composable porque o padding da barra de navegação não foi consumido pelo elemento pai. A criança é colocada no local correto na imagem à direita usando uma régua personalizada, como mostrado no exemplo de código anterior.

Verificar se os familiares responsáveis estão restritos

Para usar WindowInsetsRulers com segurança, confira se o elemento pai fornece restrições válidas. Os elementos pai precisam ter um tamanho definido e não podem depender do tamanho de um elemento filho que usa WindowInsetsRulers. Use fillMaxSize ou outros modificadores de tamanho em elementos combináveis principais.

Da mesma forma, colocar um elemento combinável que usa WindowInsetsRulers em um contêiner de rolagem, como verticalScroll, pode causar um comportamento inesperado, já que o contêiner de rolagem fornece restrições de altura ilimitadas, que são incompatíveis com a lógica da régua.