Android Academy · Aula

Seu primeiro componente composable

Crie e visualize uma função composable.

Seu primeiro componente composable é uma aula grátis de Android Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Android Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Android Academy inclui 4 aulas no total.

Sua primeira função componível

Uma função componível é simplesmente uma função Kotlin marcada com @Composable. Vamos escrever uma que cumprimente um usuário pelo nome.

@Composable
fun Greeting(name: String) {
    Text(text = "Hello, $name!")
}

A anotação @Composable

A anotação @Composable informa ao compilador que essa função pode emitir a interface e chamar outras funções componíveis. Sem ela, você não pode chamar Text, Button nem outras funções de interface.

Convenção de nomenclatura

As funções componíveis que emitem a interface recebem nomes de substantivos em PascalCase, como Greeting ou ProfileCard — de modo semelhante a uma classe. Isso indica que "essa função desenha algo", em vez de "essa função retorna um valor".

Os parâmetros conduzem a interface

Uma função componível recebe parâmetros, assim como qualquer função. Esses parâmetros são suas entradas. Argumentos diferentes produzem interfaces diferentes.

@Composable
fun Greeting(name: String) {
    Text(text = "Welcome, $name")
}
// Greeting("Sam") and Greeting("Mia") render different text

Chamando funções componíveis

As funções componíveis só podem ser chamadas por outras funções componíveis. Você compõe uma tela aninhando chamadas.

@Composable
fun WelcomeScreen() {
    Greeting(name = "Ada")
    Greeting(name = "Grace")
}

Hospedagem com setContent

Para realmente exibir funções componíveis, uma Activity chama setContent { } em onCreate. A expressão lambda é a raiz da sua interface Compose.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            WelcomeScreen()
        }
    }
}

Funções componíveis retornam Unit

Observe que as funções componíveis não retornam um objeto de interface. Elas têm o tipo de retorno Unit e emitem a interface como efeito colateral da chamada. Você cria a interface chamando funções, não retornando valores.

Parâmetros padrão

Os argumentos padrão do Kotlin funcionam muito bem aqui. Dê a um parâmetro um valor padrão para que os chamadores possam omiti-lo.

@Composable
fun Greeting(name: String = "Guest") {
    Text(text = "Hello, $name!")
}
// Greeting() shows "Hello, Guest!"

Reutilizando funções componíveis

Como são funções, as funções componíveis são reutilizáveis. Defina Greeting uma vez e chame-a em qualquer lugar com nomes diferentes. É assim que você evita duplicar código de interface.

Mantenha-as pequenas

Boas funções componíveis são pequenas e focadas. Uma função componível deve descrever um único bloco lógico da interface. Crie telas maiores combinando funções componíveis pequenas.

Juntando tudo

Aqui está uma primeira função componível completa, conectada a uma atividade. Executá-la em um dispositivo exibirá "Olá, Compose!".

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Greeting(name = "Compose")
        }
    }
}

@Composable
fun Greeting(name: String) {
    Text(text = "Hello, $name!")
}

Verificação rápida

O que a anotação @Composable permite que uma função faça?

Recapitulação

Você escreveu sua primeira função componível. Lembre-se:

Marque as funções de interface com @Composable.
Use nomes em PascalCase.
Os parâmetros são as entradas que moldam a interface.
setContent { } hospeda funções componíveis em uma atividade.

Perguntas Frequentes

A aula “Seu primeiro componente composable” é grátis?

Sim — o texto completo de “Seu primeiro componente composable” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Android Academy, atualize para CoddyKit PRO. O curso de Android Academy inclui 4 aulas no total.

O que vou aprender em “Seu primeiro componente composable”?

Crie e visualize uma função composable. Você pratica Android Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Android Academy?

Nenhuma experiência prévia é necessária. Android Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.

Quanto tempo leva a aula “Seu primeiro componente composable”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Android Academy?

Sim. Cada aula de Android Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para Android Academy