TextField ja OutlinedTextField
Lukekaa, mitä käyttäjä kirjoittaa.
TextField ja OutlinedTextField 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.
Miksi tekstikentät ovat tärkeitä?
Lähes jokainen sovellus pyytää käyttäjää kirjoittamaan jotakin. Composessa TextField on väylä käyttäjän syötteen lukemiseen. ✏️
TextField-Composable
TextField näyttää muokattavan kentän. Se tarvitsee nykyisen arvon ja takaisinsoiton, joka suoritetaan aina tekstin muuttuessa.
TextField(
value = name,
onValueChange = { name = it }
)Tila ohjaa arvoa
Kenttä ei koskaan säilytä tekstiä itse. Säilytätte tekstin state-tilassa ja annatte sen kentälle, jotta käyttöliittymä näyttää aina uusimman arvon.
var name by remember { mutableStateOf("") }onValueChange sulkee kierron
Jokainen näppäinpainallus kutsuu onValueChange-toimintoa uuden tekstin kanssa. Tallennatte sen tilaan, Compose piirtää näkymän uudelleen ja kenttä näyttää kirjoitetun tekstin.
onValueChange = { newText -> name = newText }Tutustukaa OutlinedTextFieldiin
OutlinedTextField toimii täsmälleen samalla tavalla, mutta piirtää syötteen ympärille selkeän reunuksen täytetyn taustan sijaan.
OutlinedTextField(
value = name,
onValueChange = { name = it }
)Täytetty vai reunustettu?
Filled-TextFieldissä on sävytetty laatikko ja alleviivaus. Reunustettu versio on kevyempi ja ilmavampi. Ne toimivat samalla tavalla, joten valitkaa tyyliin sopiva.
Lisätkää selite
Label kertoo käyttäjälle, mihin kenttää käytetään. Se kelluu tekstin yläpuolelle, kun kenttä saa kohdistuksen tai siinä on tekstiä.
OutlinedTextField(
value = name,
onValueChange = { name = it },
label = { Text("Name") }
)Yksi rivi oletuksena
Asettakaa singleLine arvoksi true, jotta syöte pysyy yhdellä rivillä. Tällöin näppäimistössä näkyy Done-toiminto rivinvaihdon sijaan.
TextField(
value = name,
onValueChange = { name = it },
singleLine = true
)Lukekaa arvo missä tahansa
Koska teksti sijaitsee tilassa, mikä tahansa muu Composable voi lukea sen. Voitte tervehtiä käyttäjää heti, kun hän on kirjoittanut nimensä. 👋
Text("Hello, " + name)Kyseessä on ohjattu kenttä
Compose-kentät ovat ohjattuja: näytössä näkyy täsmälleen se, minkä annatte value-arvoksi. Jos unohdatte päivittää tilan, kenttä näyttää jumittuneelta.
Aloittakaa yksinkertaisesti, laajentakaa myöhemmin
Arvo ja onValueChange ovat kaikki, mitä todella tarvitsette. Selitteet, kuvakkeet ja validointi ovat lisäominaisuuksia, joita voitte lisätä myöhemmin.
Pikatarkistus
Mikä parametri vastaanottaa käyttäjän uuden tekstin jokaisella näppäinpainalluksella?
Kertaus
Tutustuitte TextField- ja OutlinedTextField-komponentteihin: sitokaa tilan arvo kenttään, päivittäkää se onValueChange-toiminnossa ja lisätkää selite. Siinä on tekstinsyöttö Composessa. 🎉
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 ”TextField ja OutlinedTextField” ilmainen?
Kyllä – oppitunnin ”TextField ja OutlinedTextField” 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 ”TextField ja OutlinedTextField”?
Lukekaa, mitä käyttäjä kirjoittaa. 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 ”TextField ja OutlinedTextField”-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
- TextField ja OutlinedTextField
- Nimikkeet, paikkamerkit ja johtavat kuvakkeet
- Näppäimistötyypit ja IME-toiminnot
- Sisäinen validointi ja virhetilat