Syvä sukellus flutter-tekstikenttään

Oppitunti tekstikenttien voimasta Flutterissa

Tämä on artikkelisarjan toinen artikkeli, joka selittää yksityiskohtaisesti joitain widget-tarjouksia, ja niille tarkoitettuja vinkkejä. Viimeisessä artikkelissa tutkimme yksityiskohtaisesti ListView-widgettiä. Tässä artikkelissa tutustumme Flutter TextField -widgettiin kattavasti ja selvitämme sen ominaisuudet ja mahdolliset räätälöinnit.

Johdatus TextField-kenttään

Tekstikenttä-widget mahdollistaa tietojen keräämisen käyttäjältä. Perustekstikentän koodi on yhtä yksinkertainen kuin:

Tekstikenttä()

Tämä luo perustietokentän:

Tietojen hakeminen TextField-kentästä

Koska TextField-kentällä ei ole tunnusta, kuten Androidissa, tekstiä ei voida noutaa pyynnöstä ja se on sen sijaan tallennettava muuttujaan muutoksen yhteydessä tai käytettävä ohjainta.

  1. Helpoin tapa tehdä tämä on käyttää onChanged-menetelmää ja tallentaa nykyinen arvo yksinkertaiseen muuttujaan. Tässä on sen mallikoodi:
Merkkijonoarvo = "";
Tekstikenttä(
  onChanged: (teksti) {
    arvo = teksti;
  },
)

2. Toinen tapa tehdä tämä on käyttää TextEditingControlleria. Ohjain on liitetty TextField-kenttään, ja sen avulla voimme kuunnella ja hallita myös TextField-tekstiä.

TextEditingController controller = TextEditingController ();
Tekstikenttä(
  ohjain: ohjain,
)

Ja voimme kuunnella muutoksia käyttämällä

controller.addListener (() {
  // Tee jotain täällä
});

Ja hanki tai aseta arvoja käyttämällä

Tulosta (controller.text); // Tulosta nykyinen arvo
controller.text = "Demoteksti"; // Aseta uusi arvo

Muut TextBield-soittopyynnöt

Tekstikenttä-widget tarjoaa myös muita takaisinsoittoja, kuten

  1. onEditingCompleted
  2. onSubmitted
onEditingComplete: () {},
on lähetetty: (arvo) {},

Nämä ovat takaisinsoittoja, joihin vaaditaan toimintoja, kuten kun käyttäjä napsauttaa iOS: n Valmis-painiketta.

Keskittyminen tekstikenttiin

Jos ”keskitytään” tekstikenttään, teksti-kenttä on aktiivinen ja kaikki näppäimistön syötöt johtavat tietoihin, jotka syötetään tarkennettuun tekstikenttään.

1. Työskentely automaattitarkennuksella

Jos haluat automaattitarkentaa TextField-kenttään, kun widget luodaan, aseta automaattitarkennuskenttä true.

Tekstikenttä(
  automaattitarkennus: totta,
),

Tämä asettaa tarkennuksen tekstikenttään oletuksena.

Tarkennus siirtyy oletusarvoisesti tekstikenttään

2. Mukautettujen tarkennusmuutosten käsittely

Entä jos haluamme muuttaa painopisteen kysyntään eikä pelkästään automaattitarkennukseen? Koska tarvitsemme jonkin verran tapaa osoittaa, mihin tekstikenttään haluamme keskittyä seuraavaan, liitämme FocusNode -kentän tekstikenttään ja käytä sitä vaihtaaksesi tarkennusta.

// Alusta rakennusmenetelmän ulkopuolella
FocusNode nodeOne = FocusNode ();
FocusNode nodeTwo = FocusNode ();
// Suorita tämä rakennusmenetelmän sisällä
Tekstikenttä(
  focusNode: nodeOne,
),
Tekstikenttä(
  focusNode: nodeTwo,
),
RaisedButton (
  onPressed: () {
    FocusScope.of (yhteydessä) .requestFocus (nodeTwo);
  },
  lapsi: Teksti ("Seuraava kenttä"),
),

Luomme kaksi tarkennussolmua ja liitämme ne tekstikenttiin. Kun painiketta painetaan, käytämme FocusScopea pyytääksesi tarkennusta seuraavaan TextField-kenttään.

Tarkennus muuttuu, kun painiketta painetaan

Tekstikenttien näppäimistöominaisuuksien muuttaminen

Flutter-tekstikenttä antaa sinun mukauttaa myös näppäimistöön liittyviä ominaisuuksia.

1. Näppäimistötyyppi

Tekstikenttä antaa sinun mukauttaa näppäimistötyyppiä, joka näkyy, kun Tekstikenttä on tarkennettu. Muutamme keyboardType -ominaisuuden tähän.

Tekstikenttä(
  keyboardType: TextInputType.number,
),

Tyypit ovat:

  1. TextInputType.text (Normaali täydellinen näppäimistö)
  2. TextInputType.number (numeerinen näppäimistö)
  3. TextInputType.emailAddress (normaali näppäimistö, jossa ”@”)
  4. TextInputType.datetime (Numeerinen näppäimistö, jossa “/” ja “:”)
  5. TextInputType.numberWithOptions (numeerinen näppäimistö, jossa vaihtoehdot ovat käytössä allekirjoitetussa ja desimaalitilassa)
  6. TextInputType.multiline (Optimoi monirivistä tietoa varten)

2. TextInputAction

TekstikenttäInputAction-tekstin muuttaminen antaa sinun muuttaa itse näppäimistön toimintapainiketta.

Esimerkiksi:

Tekstikenttä(
  textInputAction: TextInputAction. ContinueAction,
),

Tämä aiheuttaa “Valmis” -painikkeen korvaamisen “Jatka” -painikkeella:

Tai

Tekstikenttä(
  textInputAction: TextInputAction.send,
),

syyt

Täydellinen luettelo on liian suuri, jotta sitä voidaan näyttää täällä, mutta muista tarkistaa se.

3. Automaattinen

Ottaa käyttöön tai poistaa käytöstä tietyn tekstikentän automaattisen korjauksen. Aseta tämä automaattisen korjauksen kentällä.

Tekstikenttä(
  automaattinen korjaus: väärä,
),

Tämä poistaa myös ehdotukset käytöstä.

4. Tekstin isot kirjaimet

Tekstikenttä tarjoaa muutama vaihtoehto, kuinka kirjainten isoilla kirjaimilla käyttäjän syötteistä voidaan kirjoittaa.

Tekstikenttä(
  textCapitalization: TextCapitalization.sentences,
),

Tyypit ovat:

  1. TextCapitalization.sentences

Tämä on normaali tyyppi isoille kirjaimille, joita odotamme, jokaisen lauseen iso kirjain isoilla kirjaimilla.

2. TextCapitalization.hahmot

Merkitsee lauseiden kaikki merkit isoiksi.

3. TextCapitalization.words

Kunkin sanan iso kirjain isoilla kirjaimilla.

Tekstin tyyli, kohdistus ja kohdistimen asetukset

Flutter mahdollistaa tekstin muotoilun ja kohdistamisen tekstikenttään sekä kohdistimeen tekstikentän sisällä.

Tekstin kohdistaminen tekstikenttään

Käytä textAlign-ominaisuutta säätääksesi missä kohdistin on TextField-kentässä.

Tekstikenttä(
  textAlign: TextAlign.center,
),

Tämä aiheuttaa kohdistimen ja tekstin alkamisen tekstikentän keskeltä.

Tällä on tavanomaiset kohdistusominaisuudet: alku, loppu, vasen, oikea, keskusta, perustella.

Tekstin muotoilu tekstikenttään

Tyyliominaisuuden avulla voit muuttaa tekstikentän tekstin ulkoasua. Käytä sitä värin, fonttikoon jne. Muuttamiseen. Tämä on samanlainen kuin Teksti-widgetin tyyliominaisuus, joten emme vie vie liian paljon aikaa tutkia sitä.

Tekstikenttä(
  tyyli: TextStyle (väri: Colors.red, fontWeight: FontWeight.w300),
),

Kohdistimen muuttaminen TextField-kentässä

Kohdistinta voi muokata suoraan TextField-widgetistä.

Voit muuttaa kohdistimen väriä, leveyttä ja kulmien sädettä. Esimerkiksi tässä teen pyöreän punaisen kohdistimen ilman näkyvää syytä.

Tekstikenttä(
  cursorColor: Colors.red,
  cursorRadius: Säde.ympyrä (16,0),
  kohdistimen leveys: 16.0,
),

Tekstin kentän koon ja enimmäispituuden hallitseminen

Tekstikenttä voi hallita sen sisälle kirjoitettujen merkkien enimmäismäärää, rivien enimmäismäärää ja laajentaa tekstiä kirjoitettaessa.

Enimmäismerkkien hallinta

Tekstikenttä(
  enimmäispituus: 4,
),

Asettamalla maxLength-ominaisuus, enimmäispituus pannaan täytäntöön ja laskuri lisätään oletusarvoisesti TextField-kenttään.

Laajennettavan tekstikentän luominen

Toisinaan tarvitsemme tekstikentän, joka laajenee, kun yksi rivi on valmis. Flutterissa se on hieman outoa (silti helppoa) tehdä. Tätä varten asetamme maksimilinjat nollaksi, joka on oletuksena yksi. Asettaminen tyhjäksi ei ole jotain mitä olemme tottuneet, mutta silti se on helppo tehdä.

Huomaa: Kun asetat maxLines-arvon suoraksi, se laajenee oletusarvoisesti siihen määrään rivejä.

Tekstikenttä(
  maksimilinjat: 3,
)

Epäselvä teksti

Hämärtää tekstin tekstikenttään asettamalla obscureText-arvoon tosi.

Tekstikenttä(
  obscureText: totta,
),

Ja lopuksi, tekstikentän koristaminen

Tähän asti olemme keskittyneet ominaisuuksiin, joita Flutter tarjoaa syöttöä varten. Nyt siirrymme todella suunnittelemaan hienon TextField-kentän emmekä sano "ei" suunnittelijallesi.

Tekstikentän sisustamiseen käytämme koriste-ominaisuutta, joka vie InputDecoration-sovelluksen. Koska InputDecoration-luokka on valtava, yritämme mennä nopeasti läpi suurimman osan tärkeistä ominaisuuksista.

Anna tietoa käyttäjälle vihjeiden ja tarrojen ominaisuuksista

Sekä vihje että tarra ovat merkkijonoja, jotka auttavat käyttäjää ymmärtämään tekstikenttään syötettävät tiedot. Erona on, että vihje katoaa, kun käyttäjä alkaa kirjoittaa, kun tarra kelluu TextField-kentän päälle.

Vihjeetiketti

Voit lisätä kuvakkeita painikkeilla “icon”, “prefixIcon” ja “suffixIcon”

Voit lisätä kuvakkeita suoraan tekstikenttiin. Voit käyttää tekstin sijaan myös prefixText ja suffixText.

Tekstikenttä(
  sisustus: InputDecoration (
    kuvake: Kuvake (Icons.print)
  ),
),
Kuvake kuvakkeen ominaisuuden avulla
Tekstikenttä(
  sisustus: InputDecoration (
    prefixIcon: Kuvake (Icons.print)
  ),
),
Kuvake, jossa käytetään prefixIcon-ominaisuutta

Käytä samoin kaikissa muissa widgetissä prefixIcon sijasta prefixIcon.

Jos haluat käyttää yleistä widgetiä kuvakkeen sijasta, käytä etuliite-kenttää. Lisää jälleen kerran ympyränmuutosindikaattori ilman näkyvää syytä TextField-kenttään.

Tekstikenttä(
  sisustus: InputDecoration (
    etuliite: CircularProgressIndicator (),
  ),
),

Jokaisella ominaisuudella, kuten vihje, tarra jne., On omat tyylikentänsä

Muotoile vihje käyttämällä hintStyleä. Muotoile tarra käyttämällä labelStyle.

Tekstikenttä(
  sisustus: InputDecoration (
    hintText: "Demoteksti",
    hintStyle: TextStyle (fontWeight: FontWeight.w300, väri: Colors.red)
  ),
),

Huomaa: Vaikka olen tehnyt sen tässä esimerkissä, älä yleensä muuta vihjeen väriä, koska se on käyttäjille hämmentävä.

Käytä ”helperText”, jos et halua etikettiä, mutta haluat jatkuvan viestin käyttäjälle.

Tekstikenttä(
  sisustus: InputDecoration (
    helperText: "Hei"
  ),
),

Käytä ”decoration: null” tai InputDecoration.collapsed poistaaksesi oletusviivauksen TextField-kentästä

Käytä näitä poistamaan tekstikentän oletusviivaukset.

Tekstikenttä(
  koristelu: InputDecoration.collapsed (hintText: "")
),

Käytä ”reunaa” antaaksesi reunan tekstikenttään

Tekstikenttä(
  sisustus: InputDecoration (
    reuna: OutlineInputBorder ()
  )
),

Voit tehdä paljon koristeluja, mutta emme voi käsitellä kaikkea yhdessä artikkelissa. Mutta toivon, että tämä tekee selväksi ymmärtää, kuinka helppoa on mukauttaa Flutter TextField -kenttiä.

Se on tämä artikkeli! Toivottavasti nautit siitä ja jätät muutaman taputuksen, jos teit. Seuraa minua saadaksesi lisää Flutter-artikkeleita ja kommentoidaksesi palautetta, joka sinulla voi olla tästä artikkelista.

Tutustu myös muihin profiileihini ja artikkeleihini:

Viserrys

GitHub

Jotkut muista artikkeleistani