Column: asioiden pinoaminen pystysuunnassa
Asetelkaa lapsielementit ylhäältä alas.
Column: asioiden pinoaminen pystysuunnassa on ilmainen Jetpack Compose Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Jetpack Compose Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Jetpack Compose Academy-kurssilla on yhteensä 4 oppituntia.
Pinoaminen pystysuunnassa
Kun haluatte sijoittaa lapset ylhäältä alas, käyttäkää Column-komponenttia. Se on Composen ensisijainen asettelu pystysuuntaisille pinoille. 📚
Ensimmäinen Column
Column ottaa vastaan trailing-lambdan. Jokaisesta sen sisällä kutsumastanne Composablesta tulee lapsi, joka piirretään kirjoittamassanne järjestyksessä.
Column {
Text("First")
Text("Second")
}Järjestys on ylhäältä alas
Lapset pinotaan lähdekoodin järjestyksessä. Ensimmäinen Composable sijoittuu ylös, seuraava sen alle ja niin edelleen näytön alareunaan asti.
Erilaisten lasten yhdistäminen
Column voi sisältää mitä tahansa Composableja, ei vain tekstiä. Buttonit, kuvat ja jopa muut Columnit pinoutuvat sen sisällä ongelmitta.
Column {
Text("Title")
Button(onClick = {}) { Text("Go") }
}Oletuskoko: sisältöön mukautuminen
Oletusarvoisesti Column on vain niin korkea ja leveä kuin sen lapset tarvitsevat. Se mukautuu sisältöön, ellette määritä toisin.
Leveyden täyttäminen
Lisätkää Modifier koon muuttamiseksi. fillMaxWidth venyttää Columnin koko näytön levyiseksi.
Column(modifier = Modifier.fillMaxWidth()) {
Text("Wide column")
}Lasten välinen tila
Käyttäkää verticalArrangement-parametria yhdessä spacedByn kanssa, jotta jokaisen lapsen väliin tulee tasainen tila. Jokaiselle kohteelle ei tarvita erillistä paddingia.
Column(verticalArrangement = Arrangement.spacedBy(8.dp)) {
Text("A")
Text("B")
}Lasten kohdistaminen sivusuunnassa
Kohdistakaa lapset asettamalla horizontalAlignment. CenterHorizontally siirtää ne kaikki Columnin leveyden keskelle.
Column(horizontalAlignment = Alignment.CenterHorizontally) {
Text("Centered")
}Column ei vielä vieritä
Tavallinen Column ei vieritä. Jos lapset ulottuvat näytön ulkopuolelle, ne rajautuvat pois, joten Column sopii parhaiten lyhyille ja kiinteille listoille.
Vierityksen lisääminen tarvittaessa
Liittäkää pidempää sisältöä varten Columnin modifieriin verticalScroll. Nyt koko pino vierittyy yhtenä kokonaisuutena.
Column(modifier = Modifier.verticalScroll(rememberScrollState())) {
Text("Long content")
}Sisäkkäiset rakenteet oikeissa näkymissä
Oikeissa näkymissä Columnit sisäkkäistyvät toistensa sisään. Ulompi Column sisältää osiot, ja kukin osio on oma pieni yksityiskohtien Columninsa.
Pikatarkistus
Varmistetaan, miten Column järjestää lapsensa.
Kertaus: Column
Opitte Columnin: se pinoaa lapset ylhäältä alas järjestyksessä, mukautuu oletusarvoisesti sisältöön ja käyttää järjestelyä, kohdistusta sekä modifiereita koon ja välien määrittämiseen.
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
- 30
- Oppitunnit
- 120
Usein kysytyt kysymykset
Onko oppitunti ”Column: asioiden pinoaminen pystysuunnassa” ilmainen?
Kyllä – oppitunnin ”Column: asioiden pinoaminen pystysuunnassa” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Jetpack Compose Academy-kurssin, päivitä CoddyKit PROhon. Jetpack Compose Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Column: asioiden pinoaminen pystysuunnassa”?
Asetelkaa lapsielementit ylhäältä alas. Harjoittelet Jetpack Compose Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Jetpack Compose Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Jetpack Compose 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 ”Column: asioiden pinoaminen pystysuunnassa”-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ä Jetpack Compose Academy-oppitunnilla?
Kyllä. Jokainen Jetpack Compose 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
- Column: asioiden pinoaminen pystysuunnassa
- Row: asioiden sijoittaminen rinnakkain
- Box: kerrostaminen ja limittäminen
- Järjestys ja kohdistus