O que é um Composable

No Jetpack Compose, você cria telas escrevendo funções, em vez de inflar layouts XML. Um componível é simplesmente uma função Kotlin que descreve uma parte da sua interface do usuário.

Você marca essa função com a anotação @Composable. Isso informa ao compilador do Compose que a função pode emitir a interface do usuário e chamar outras funções componíveis.

Adicionar @Composable acima de uma função libera os recursos poderosos do Compose. Dentro dela, você pode chamar outros componíveis, como Text ou Column.

Por convenção, os nomes das funções componíveis começam com uma letra maiúscula, assim como os nomes das classes. Isso facilita identificar as funções de interface do usuário no código.

Um componível não retorna um objeto View. Em vez disso, ele emite a interface do usuário como efeito colateral quando o Compose o executa. Você simplesmente descreve o que deve aparecer na tela.

Isso é chamado de estilo declarativo: você informa como a interface do usuário deve ser para os dados atuais, e o Compose descobre como desenhá-la.

O verdadeiro poder vem do aninhamento. Um componível pode chamar outros componíveis, permitindo criar telas complexas a partir de partes pequenas e reutilizáveis.

Aqui, um componível pai chama um componível filho. O Compose executa ambos de cima para baixo e organiza a interface emitida.

A maioria dos componíveis retorna Unit, o que significa que não retorna nada útil. A função deles é emitir a interface do usuário, não devolver um valor.

Assim, você chama um componível pelo efeito que ele produz na tela, não para capturar um resultado. Isso é diferente das funções comuns, mas logo se torna natural.

Os componíveis podem receber parâmetros, assim como as funções normais do Kotlin. Isso permite que o mesmo componível exiba dados diferentes.

Aqui, Greeting aceita um name e o exibe. Passar dados para dentro torna seus componíveis flexíveis e reutilizáveis em todo o aplicativo.

Como os componíveis são funções, você pode chamar um deles várias vezes com argumentos diferentes. Cada chamada emite sua própria cópia da interface do usuário.

É assim que você evita repetir código: escreva a interface uma vez e reutilize-a onde precisar.

Você coloca os componíveis dentro da atividade Android usando setContent. Esse bloco é o ponto de entrada em que o Compose assume o controle da tela.

Dentro de setContent, você chama seu componível de nível superior, e tudo o que ele emitir se torna a interface do usuário do aplicativo.

Quando os dados lidos por um componível mudam, o Compose executa essa função novamente para atualizar a tela. Essa nova execução é chamada de recomposição.

Você não atualiza a interface do usuário manualmente. Altera os dados, e o Compose recompõe automaticamente os componíveis afetados. Isso mantém a tela sincronizada com o estado.

Um bom hábito é fazer com que cada componível tenha uma única função clara. Componíveis pequenos e focados são mais fáceis de ler, testar e reutilizar.

Se uma função ficar grande demais, divida-a em componíveis menores e chame-os em conjunto. Seu futuro eu agradecerá.

Os componíveis vêm das bibliotecas do Compose. Você frequentemente importará androidx.compose.runtime.Composable para a anotação e androidx.compose.material3.Text para texto.

O Android Studio geralmente adiciona essas importações para você. Saber de onde elas vêm ajuda quando uma importação está ausente.

Vamos revisar o que torna uma função componível.

Você aprendeu que um componível é uma função Kotlin marcada com @Composable que descreve a interface do usuário de forma declarativa. Os componíveis podem receber parâmetros, chamar outros componíveis e ter nomes iniciados por letra maiúscula.

Eles retornam Unit e emitem a interface do usuário em vez de retornar um valor. Quando os dados mudam, o Compose os recompõe para atualizar a tela. Em seguida, você exibirá texto real e empilhará elementos com Column.