Jetpack Compose Academy · Oppitunti

Tausta, reunus ja rajaus

Lisätkää värejä, ääriviivoja ja pyöristettyjä muotoja.

Oppitunti 2/413 vaihetta

Tausta, reunus ja rajaus on ilmainen Jetpack Compose Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/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.

Koristele modifioijilla

Koon säätämisen lisäksi modifioijilla voi koristella Composablea. Voit maalata taustan, piirtää reunuksen ja pyöristää kulmat. 🎨

Lisää tausta

background täyttää Composablen yhtenäisellä värillä. Se maalaa koko elementin käyttämän alueen, mukaan lukien sen koon ja täytön.

Modifier.background(Color.Blue)

Käytä teeman värejä

Suosi teeman värejä suoraan määritettyjen arvojen sijaan. MaterialThemesta haetut värit pitävät sovelluksen yhdenmukaisena vaaleassa ja tummassa tilassa.

Modifier.background(
  MaterialTheme.colorScheme.primary
)

Piirrä reunus

Rajaa Composable border-modifioijalla. Anna sille paksuus dp-yksiköissä ja väri, niin Compose piirtää reunan puolestasi.

Modifier.border(2.dp, Color.Gray)

Tutustu muotoihin

Shape kuvaa ääriviivaa, kuten pyöristettyä tai ympyränmuotoista. Sekä background että border hyväksyvät muodon, jolla niiden siluettia voi muuttaa.

Pyöristetyt kulmat

RoundedCornerShape pehmentää kulmia dp-yksiköissä määritetyllä säteellä. Se on ensisijainen muoto korteille, painikkeille ja siruille.

RoundedCornerShape(12.dp)

Muotoiltu tausta

Välitä muoto background-modifioijalle, niin väri täyttää vain ääriviivan sisäpuolen ja saat siistin pyöristetyn paneelin.

Modifier.background(
  Color.LightGray,
  RoundedCornerShape(12.dp)
)

Rajaa sisältö

clip leikkaa kaiken muodon ulkopuolelle piirretyn. Käytä sitä, jotta kuvat ja lapset noudattavat pyöristettyjä kulmia.

Modifier.clip(RoundedCornerShape(12.dp))

Tee ympyrä

Käytä CircleShape-muotoa, kun haluat täydellisen ympyrän, kuten pyöreän avatarin tai kelluvan painikkeen.

Modifier.clip(CircleShape)

Rajaa ennen piirtämistä

Sijoita clip ennen background-modifioijaa, jotta myös täyttö pyöristyy. Ketjun järjestys määrittää, mikä rajataan.

Modifier
  .clip(RoundedCornerShape(12.dp))
  .background(Color.Cyan)

Yhdistä korttia varten

Yhdistä clip-, background- ja border-modifioijat, niin luot viimeistellyn korttipinnan muutamalla rivillä.

Modifier
  .clip(RoundedCornerShape(16.dp))
  .background(Color.White)
  .border(1.dp, Color.LightGray)

Pikatarkistus

Haluat pyöristetyn taustan, jonka täyttökin on pyöristetty. Mikä modifioija varmistaa tämän?

Vastaa interaktiivisessa oppitunnissa

Kertaus

Osaat nyt tyylitellä minkä tahansa elementin: background maalaa sen, border rajaa sen ja Shape-muodon kanssa käytetty clip pyöristää sen. 🎉

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: 30
Oppitunnit: 120

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Tausta, reunus ja rajaus” ilmainen?

Kyllä – oppitunnin ”Tausta, reunus ja rajaus” 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 ”Tausta, reunus ja rajaus”?

Lisätkää värejä, ääriviivoja ja pyöristettyjä muotoja. 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 2/4.

Kuinka kauan ”Tausta, reunus ja rajaus”-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

← Takaisin: Jetpack Compose Academy