Jetpack Compose Academy · Oppitunti

Käytössä-, pois käytöstä- ja lataustilat

Ilmaiskaa painikkeiden käytettävyys niiden tilassa.

Oppitunti 3/413 vaihetta

Käytössä-, pois käytöstä- ja lataustilat on ilmainen Jetpack Compose Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/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.

Painikkeilla on eri tiloja

Hyvä painike kuvastaa todellista tilannetta: valmis, estetty tai käynnissä. Compose auttaa ilmaisemaan nämä tilat, jotta käyttäjä tietää aina, mikä on mahdollista. 🚦

enabled-parametri

Jokainen painike ottaa vastaan enabled-lipun. Asettamalla sen arvoon false painike muuttuu automaattisesti harmaaksi eikä reagoi napautuksiin.

Button(
    onClick = { submit() },
    enabled = false
) { Text("Submit") }

Ohjatkaa enabled-tilaa tilasta

Var sinainen hyöty saadaan sitomalla enabled tilaan. Yhdistäkää se validointiin, jotta painike aktivoituu vasta, kun syöte on valmis.

Button(
    onClick = { submit() },
    enabled = name.isNotBlank()
) { Text("Submit") }

Käytöstä poistaminen estää toiminnon

Käytöstä poistettu painike näkyy edelleen, joten käyttäjä näkee toiminnon olevan olemassa. Haalistunut ulkoasu ilmaisee miksi ei vielä ilman virheilmoitusta.

Näyttäkää edistyminen toiminnon aikana

Hitaissa toiminnoissa näyttäkää lataustila. Seuratkaa boolean-arvoa ja vaihtakaa teksti latausympyrään toiminnon ajaksi.

var loading by remember { mutableStateOf(false) }

Poistakaa käytöstä latauksen ajaksi

Latauksen aikana asettakaa enabled = !loading, jotta käyttäjä ei voi napauttaa painiketta kahdesti ja käynnistää samaa toimintoa uudelleen.

Button(
    onClick = { loading = true },
    enabled = !loading
) { Text("Save") }

Vaihda latausympyrään

Haarauttakaa sisältö lipun perusteella: näyttäkää pieni CircularProgressIndicator, kun lataus on käynnissä, ja muulloin painikkeen teksti.

Button(onClick = { }, enabled = !loading) {
    if (loading) CircularProgressIndicator(Modifier.size(18.dp))
    else Text("Save")
}

Pienentäkää latausympyrää

Oletusarvoinen latausympyrä on suuri. Rajoittakaa sen kokoa Modifier.size-modifierilla, jotta se sopii siististi tekstin paikalle.

CircularProgressIndicator(
    modifier = Modifier.size(18.dp),
    strokeWidth = 2.dp
)

Palauttakaa tila valmistumisen jälkeen

Kun toiminto valmistuu, asettakaa loading takaisin arvoon false. Teksti palaa ja painiketta voi taas napauttaa.

onResult = { loading = false }

Tilat ehkäisevät virheitä

Yhdessä enabled ja loading suojaavat toimintojanne: napautuksia ei hyväksytä ennen kuin syöte on kelvollinen, eikä työn aikana synny kaksoisnapautuksia.

Viestikää, älkää piilottako

Poistakaa painike mieluummin käytöstä kuin piilottakaa se. Näkyvä mutta käytöstä poistettu ohjain kertoo käyttäjälle, miten toiminto voidaan ottaa käyttöön.

Pikatarkistus

Tallennustoiminto kestää kaksi sekuntia, ja käyttäjät napauttavat sitä jatkuvasti kahdesti.

Kertaus: tilalliset painikkeet

Opitte kuvastamaan todellista tilannetta: enabled sallii toiminnon kelvollisuuden perusteella, ja loading-lippu näyttää etenemisen sekä estää toistot. Rehelliset painikkeet tekevät käyttäjät tyytyväisiksi. 🎯

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

Usein kysytyt kysymykset

Onko oppitunti ”Käytössä-, pois käytöstä- ja lataustilat” ilmainen?

Kyllä – oppitunnin ”Käytössä-, pois käytöstä- ja lataustilat” 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 ”Käytössä-, pois käytöstä- ja lataustilat”?

Ilmaiskaa painikkeiden käytettävyys niiden tilassa. 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 3/4.

Kuinka kauan ”Käytössä-, pois käytöstä- ja lataustilat”-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

  1. Button ja onClick
  2. Text-, Outlined- ja Icon-painikkeet
  3. Käytössä-, pois käytöstä- ja lataustilat
  4. clickable missä tahansa Composablessa
← Takaisin: Jetpack Compose Academy