Android Academy · Oppitunti

Ensimmäinen Composable

Luokaa ja esikatselkaa composable-funktio.

Oppitunti 2/413 vaihetta

Ensimmäinen Composable on ilmainen Android Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Android Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Android Academy-kurssilla on yhteensä 4 oppituntia.

Ensimmäinen composable-funktiosi

Composable-funktio on vain Kotlin-funktio, joka on merkitty @Composable-annotaatiolla. Kirjoitetaan funktio, joka tervehtii käyttäjää nimeltä.

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

@Composable-annotaatio

@Composable-annotaatio kertoo kääntäjälle, että funktio voi tuottaa käyttöliittymän ja kutsua muita composable-funktioita. Ilman sitä et voi kutsua Text-, Button- tai muita käyttöliittymäfunktioita.

Nimeämiskäytäntö

Käyttöliittymän tuottavat composable-funktiot nimetään PascalCase-muodossa substantiiveilla, kuten Greeting tai ProfileCard — samaan tapaan kuin luokat. Tämä ilmaisee, että funktio "piirtää jotakin" eikä "palauta arvoa".

Parametrit ohjaavat käyttöliittymää

Composable-funktio ottaa parametreja aivan kuten mikä tahansa funktio. Parametrit ovat sen syötteitä. Eri argumentit tuottavat erilaisen käyttöliittymän.

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

Composable-funktioiden kutsuminen

Composable-funktioita voi kutsua vain muista composable-funktioista. Näyttö rakennetaan kutsuja sisäkkäin sijoittamalla.

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

Isännöinti setContent-funktiolla

Jotta composable-funktiot todella näkyvät näytössä, Activity kutsuu setContent { } -funktiota onCreate-metodissa. Lambda on Compose-käyttöliittymäsi juuri.

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

Composable-funktiot palauttavat Unit-arvon

Huomaa, että composable-funktiot eivät palauta käyttöliittymäoliota. Niiden palautustyyppi on Unit, ja ne tuottavat käyttöliittymän kutsun sivuvaikutuksena. Käyttöliittymä rakennetaan kutsumalla funktioita, ei palauttamalla arvoja.

Oletusparametrit

Kotlinin oletusargumentit sopivat tähän erinomaisesti. Anna parametrille oletusarvo, jotta kutsuja voi jättää sen pois.

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

Composable-funktioiden uudelleenkäyttö

Koska composable-funktiot ovat funktioita, ne ovat uudelleenkäytettäviä. Määritä Greeting kerran ja kutsu sitä missä tahansa eri nimillä. Näin vältät käyttöliittymäkoodin toistamisen.

Pidä ne pieninä

Hyvät composable-funktiot ovat pieniä ja selkeästi rajattuja. Yhden composable-funktion pitäisi kuvata yhtä loogista käyttöliittymän osaa. Rakenna suuremmat näytöt yhdistelemällä pieniä composable-funktioita.

Kootaan kokonaisuus

Tässä on kokonainen ensimmäinen composable-funktio yhdistettynä Activityyn. Kun suoritat sen laitteella, näytössä näkyy "Hello, 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!")
}

Pikatarkistus

Mitä @Composable-annotaatio sallii funktion tehdä?

Vastaa interaktiivisessa oppitunnissa

Kertaus

Kirjoitit ensimmäisen composable-funktiosi. Muista:

Merkitse käyttöliittymäfunktiot @Composable-annotaatiolla.
Käytä PascalCase-nimiä.
Parametrit ovat syötteitä, jotka määrittävät käyttöliittymän.
setContent { } isännöi composable-funktioita Activityssa.

Aloita maksutta

Opi Kotlin tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 36
Oppitunnit: 152

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Ensimmäinen Composable” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Android Academy-oppimispolun 3 oppituntia, myös oppitunnin “Ensimmäinen Composable”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Android Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Ensimmäinen Composable”?

Luokaa ja esikatselkaa composable-funktio. Harjoittelet Android Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Android Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Android Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.

Kuinka kauan ”Ensimmäinen Composable”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Android Academy-oppitunnilla?

Kyllä. Jokainen Android Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: Android Academy