Android Academy · Oppitunti

Mikä Composable on

Käyttöliittymää kuvaavat funktiot.

Oppitunti 1/413 vaihetta

Mikä Composable on on ilmainen Android Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/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.

Mikä on composable?

Jetpack Composessa rakennat näkymiä kirjoittamalla funktioita XML-asettelujen lataamisen sijaan. Composable on Kotlin-funktio, joka kuvaa osan käyttöliittymästä.

Merkitset tällaisen funktion @Composable-annotaatiolla. Se kertoo Compose-kääntäjälle, että funktio voi tuottaa käyttöliittymää ja kutsua muita composable-funktioita.

@Composable-annotaatio

Kun lisäät funktion yläpuolelle merkinnän @Composable, saat Compose-toiminnot käyttöösi. Funktion sisällä voit kutsua muita composable-funktioita, kuten Text tai Column.

Käytännön mukaan composable-funktioiden nimet alkavat isolla kirjaimella aivan kuten luokkien nimet. Näin käyttöliittymäfunktiot on helppo tunnistaa koodista.

@Composable
fun Greeting() {
    Text("Hello, Compose!")
}

Käyttöliittymä kuvataan Kotlinilla

Composable ei palauta View-oliota. Sen sijaan se tuottaa käyttöliittymää sivuvaikutuksena, kun Compose suorittaa sen. Kuvaat yksinkertaisesti, mitä näytössä pitäisi näkyä.

Tätä kutsutaan deklaratiiviseksi tyyliksi: ilmoitat, miltä käyttöliittymän tulee näyttää nykyisten tietojen perusteella, ja Compose huolehtii sen piirtämisestä.

@Composable
fun WelcomeMessage() {
    Text("Welcome back!")
}

Composable-funktiot kutsuvat composable-funktioita

Varsinainen teho syntyy sisäkkäisyydestä. Composable voi kutsua muita composable-funktioita, joten voit rakentaa monimutkaisia näyttöjä pienistä uudelleenkäytettävistä osista.

Tässä ylemmän tason composable kutsuu alemman tason composable-funktiota. Compose suorittaa ne ylhäältä alas ja järjestää tuotetun käyttöliittymän.

@Composable
fun Header() {
    Text("My App")
}

@Composable
fun Screen() {
    Header()
}

Funktiot ilman palautusarvoja

Useimmat composable-funktiot palauttavat Unit-arvon, mikä tarkoittaa, etteivät ne palauta hyödyllistä arvoa. Niiden tehtävä on tuottaa käyttöliittymää, ei palauttaa arvoa.

Kutsut composable-funktiota siis sen näytölle aiheuttaman vaikutuksen vuoksi etkä tuloksen tallentamiseksi. Tämä tuntuu erilaiselta kuin tavalliset funktiot, mutta muuttuu nopeasti luontevaksi.

@Composable
fun Footer() {
    Text("\u00A9 2024 CoddyKit")
}

Tietojen välittäminen parametreina

Composable-funktiot voivat ottaa parametreja tavallisten Kotlin-funktioiden tapaan. Näin sama composable voi näyttää erilaisia tietoja.

Tässä Greeting ottaa vastaan name-parametrin ja näyttää sen. Tietojen välittäminen tekee composable-funktioista joustavia ja uudelleenkäytettäviä koko sovelluksessa.

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

Composablen uudelleenkäyttö

Koska composable-funktiot ovat funktioita, voit kutsua niitä monta kertaa eri argumenteilla. Jokainen kutsu tuottaa oman kopionsa käyttöliittymästä.

Näin vältät toiston: kirjoita käyttöliittymä kerran ja käytä sitä uudelleen kaikkialla, missä sitä tarvitaan.

@Composable
fun NameList() {
    Greeting("Ada")
    Greeting("Linus")
}

Missä composable-funktiot sijaitsevat

Sijoitat composable-funktiot Android-aktiviteettiin käyttämällä setContent-funktiota. Tämä lohko on aloituskohta, jossa Compose ottaa näytön hallintaansa.

Kutsut setContent-lohkon sisällä ylimmän tason composable-funktiota, ja kaikesta sen tuottamasta muodostuu sovelluksesi käyttöliittymä.

setContent {
    Greeting("World")
}

Uudelleenkoostamisen perusteet

Kun composable-funktion lukema tieto muuttuu, Compose suorittaa funktion uudelleen näytön päivittämiseksi. Tätä kutsutaan uudelleenkoostamiseksi.

Sinun ei tarvitse päivittää käyttöliittymää itse. Muutat tietoja, ja Compose koostaa muutoksen vaikutuspiirissä olevat composable-funktiot automaattisesti uudelleen. Näin näyttö pysyy tilan kanssa synkronoituna.

Pidä composable-funktiot pieninä

Hyvä käytäntö on antaa jokaiselle composable-funktiolle yksi selkeä tehtävä. Pienet ja kohdennetut composable-funktiot ovat helpompia lukea, testata ja käyttää uudelleen.

Jos funktio kasvaa liian suureksi, jaa se pienempiin composable-funktioihin ja kutsu niitä yhdessä. Tulevaisuuden sinä kiität tästä.

@Composable
fun ProfileHeader(name: String) {
    Text(name)
}

Näkemäsi importit

Composable-funktiot tulevat Compose-kirjastoista. Usein tuot annotaatiota varten androidx.compose.runtime.Composable-importin ja tekstiä varten androidx.compose.material3.Text-importin.

Android Studio lisää nämä importit yleensä puolestasi. Kun tiedät, mistä ne tulevat, puuttuvien importien korjaaminen on helpompaa.

import androidx.compose.runtime.Composable
import androidx.compose.material3.Text

Pikatesti

Kerrataan, mikä tekee funktiosta composable-funktion.

Kertaus

Opit, että composable on @Composable-annotaatiolla merkitty Kotlin-funktio, joka kuvaa käyttöliittymää deklaratiivisesti. Composable-funktiot voivat ottaa parametreja ja kutsua muita composable-funktioita, ja niiden nimet alkavat isolla kirjaimella.

Ne palauttavat Unit-arvon ja tuottavat käyttöliittymää arvon palauttamisen sijaan. Kun tiedot muuttuvat, Compose koostaa ne uudelleen näytön päivittämiseksi. Seuraavaksi näytät oikeaa tekstiä ja pinoat näkymiä Column-funktion avulla.

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

Usein kysytyt kysymykset

Onko oppitunti ”Mikä Composable on” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Android Academy-oppimispolun 3 oppituntia, myös oppitunnin “Mikä Composable on”. 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 ”Mikä Composable on”?

Käyttöliittymää kuvaavat funktiot. 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 1/4.

Kuinka kauan ”Mikä Composable on”-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

  1. Mikä Composable on
  2. Textin ja Columnin perusteet
  3. Käyttöliittymän esikatselu
  4. Profiilikortin rakentaminen
← Takaisin: Android Academy