Giluminis panardinimas į teksto lauką

Vadovėlis apie „Fieldter“ laukų galią

Tai yra antras straipsnis iš straipsnių serijos, išsamiai paaiškinantis kai kuriuos valdikliui „Flutter“ siūlomus pasiūlymus bei jiems patarimus ir gudrybes. Paskutiniame straipsnyje išsamiai ištyrėme valdiklį „ListView“. Šiame straipsnyje mes išsamiai pateksime į „Flutter TextField“ valdiklį ir išsiaiškinsime jo ypatybes ir galimas pritaikymo galimybes.

Įvadas į „TextField“

„TextField“ valdiklis leidžia rinkti informaciją iš vartotojo. Pagrindinio teksto lauko kodas yra toks paprastas:

Teksto laukas()

Tai sukuria pagrindinį teksto lauką:

Informacijos gavimas iš teksto lauko

Kadangi „Teksto laukai“ neturi tokio ID, kaip „Android“, teksto negalima gauti pareikalavus, jie turi būti kaupiami keičiant kintamąjį arba naudoti valdiklį.

  1. Lengviausias būdas tai padaryti yra naudoti onChanged metodą ir išsaugoti dabartinę vertę paprastame kintamajame. Čia yra jo pavyzdinis kodas:
Styginių reikšmė = "";
Teksto laukas(
  onChanged: (tekstas) {
    reikšmė = tekstas;
  },
)

2. Antrasis būdas tai padaryti yra naudoti „TextEditingController“. Valdiklis yra pritvirtintas prie teksto lauko ir leidžia mums klausytis bei valdyti ir teksto lauko tekstą.

„TextEditingController“ valdiklis = „TextEditingController“ ();
Teksto laukas(
  valdiklis: valdiklis,
)

Ir mes galime klausytis pokyčių naudodamiesi

controller.addListener (() {
  // Daryk čia ką nors
});

Ir gaukite arba nustatykite vertes naudodami

spausdinti (valdiklis.tekstas); // Spausdinti dabartinę vertę
controller.text = "Demonstracinis tekstas"; // Nustatykite naują vertę

Kiti teksto lauko atšaukimai

Valdiklis „TextField“ teikia ir kitų atšaukimų, tokių kaip

  1. onEditingCompleted
  2. onSubmissions
onEditingComplete: () {},
onSubmissions: (vertė) {},

Tai yra atšaukimai, kurių metu reikalaujama atlikti veiksmus, pvz., Kai vartotojas spustelėja mygtuką „Atlikta“ „iOS“.

Darbas su dėmesiu „TextFields“

Jei „sutelkiate dėmesį“ į „TextField“, reiškia, kad „TextField“ yra aktyvus ir bet koks įvestis iš klaviatūros duos duomenis, kurie bus įvesti į fokusuotą „TextField“.

1. Darbas su automatiniu fokusavimu

Norėdami sukurti automatinį fokusavimą „TextField“, kai sukurtas valdiklis, nustatykite automatinio fokusavimo lauką į „True“.

Teksto laukas(
  automatinis fokusavimas: tiesa,
),

Pagal tai pagal nutylėjimą nustatomas dėmesys teksto laukui.

Pagal numatytuosius nustatymus židinys fokusuojamas į „TextField“

2. Darbas su pasirinktiniais fokusavimo pakeitimais

O kas, jei norime pakeisti dėmesį į paklausą, o ne tik į automatinį fokusavimą? Kadangi mums reikia tam tikro būdo nurodyti, į kurį „TextField“ norime atkreipti dėmesį, mes prie „TextField“ pridedame „FocusNode“ ir naudojame jį norėdami perjungti fokusavimą.

// Inicijuojama ne kuriant metodą
FocusNode nodeOne = FocusNode ();
FocusNode nodeTwo = FocusNode ();
// Atlikite tai statymo metodo viduje
Teksto laukas(
  focusNode: nodeOne,
),
Teksto laukas(
  focusNode: nodeTwo,
),
„RaisedButton“ (
  onPressed: () {
    „FocusScope.of“ (kontekstas) .requestFocus (nodeTwo);
  },
  vaikas: tekstas („Kitas laukas“),
),

Mes sukuriame du fokusavimo mazgus ir pridedame juos prie teksto laukų. Kai paspaudžiamas mygtukas, mes naudojame „FocusScope“, kad paprašytume fokusavimo į kitą „TextField“.

Fokusavimas pasikeičia paspaudus mygtuką

Keisti teksto laukų klaviatūros ypatybes

„TextField in Flutter“ leidžia tinkinti ir su klaviatūra susijusias savybes.

1. Klaviatūros tipas

„TextField“ leidžia jums pritaikyti klaviatūros tipą, kuris rodomas, kai „TextField“ yra sufokusuotas. Tam keičiame „keyboardType“ ypatybę.

Teksto laukas(
  keyboardType: TextInputType.number,
),

Tipai yra šie:

  1. „TextInputType.text“ (normali visa klaviatūra)
  2. „TextInputType.number“ (skaitmeninė klaviatūra)
  3. „TextInputType.emailAddress“ (įprasta klaviatūra su „@“)
  4. „TextInputType.datetime“ (skaitmeninė klaviatūra su „/“ ir „:“)
  5. „TextInputType.numberWithOptions“ (skaitmeninė klaviatūra su parinktimis, leidžiančiomis įjungti pasirašytą ir dešimtainį režimą)
  6. „TextInputType.multiline“ (optimizuoja kelių eilučių informaciją)

2. „TextInputAction“

„TextInputAction“ pakeitimas „TextField“ leidžia pakeisti pačios klaviatūros veiksmo mygtuką.

Pavyzdžiui:

Teksto laukas(
  textInputAction: TextInputAction. ContinueAction,
),

Todėl mygtukas „Atlikta“ pakeičiamas mygtuku „Tęsti“:

Arba

Teksto laukas(
  textInputAction: TextInputAction.send,
),

Priežastys

Visas sąrašas yra per didelis, kad būtų rodomas čia, tačiau būtinai patikrinkite.

3. Automatinis taisymas

Įgalina arba išjungia automatinį taisymą konkrečiame teksto lauke. Norėdami tai nustatyti, naudokite automatinio taisymo lauką.

Teksto laukas(
  automatinis taisymas: klaidingas,
),

Taip pat bus išjungti pasiūlymai.

4. Teksto rašymas didžiosiomis raidėmis

„TextField“ pateikia keletą parinkčių, kaip rašyti didžiosiomis raidėmis vartotojo įvestas raides.

Teksto laukas(
  textCapitalization: TextCapitalization.sentences,
),

Tipai yra šie:

  1. „TextCapitalization.sentences“

Tai yra įprastas didžiosios raidės tipas, kurio tikimės, kiekvieno sakinio pirmoji raidė rašoma didžiosiomis raidėmis.

2. „TextCapitalization.characters“

Didelėmis raidėmis rašomi visi sakinio simboliai.

3. „TextCapitalization.words“

Didžiosios raidės rašomos kiekvieno žodžio pirmąja raide.

Teksto stilius, lygiavimas ir žymeklio parinktys

„Flutter“ suteikia galimybę pritaikyti stilių ir derinti tekstą „TextField“, taip pat ir žymeklį „TextField“.

Teksto derinimas „TextField“ viduje

Norėdami sureguliuoti žymeklį, esantį teksto lauke, naudokite nuosavybę „textAlign“.

Teksto laukas(
  „textAlign“: „TextAlign.center“,
),

Dėl šios priežasties žymeklis ir tekstas prasideda teksto lauko viduryje.

Tai turi įprastas išlyginimo savybes: pradžia, pabaiga, kairė, dešinė, centras, pagrindimas.

Stiliaus išdėstymas teksto lauke

Mes naudojame stiliaus ypatybę norėdami pakeisti, kaip tekstas „TextField“ viduje atrodo. Naudokite jį norėdami pakeisti spalvą, šrifto dydį ir pan. Tai panaši į stiliaus ypatybę valdiklyje Tekstas, todėl mes negaišime per daug laiko jo tyrinėti.

Teksto laukas(
  stilius: „TextStyle“ (spalva: Colors.red, fontWeight: FontWeight.w300),
),

Žymeklio keitimas „TextField“

Žymeklį galima pritaikyti tiesiai iš „TextField“ valdiklio.

Jums leidžiama keisti žymeklio spalvą, kampų plotį ir spindulį. Pavyzdžiui, aš čia darau apskritą raudoną žymeklį be aiškios priežasties.

Teksto laukas(
  cursorColor: Colors.red,
  cursorRadius: Spindulys.žiedinis (16,0),
  žymeklio plotis: 16,0,
),

Teksto lauko dydžio ir maksimalaus ilgio valdymas

„Teksto laukai“ gali valdyti maksimalų jame įrašytų simbolių skaičių, maksimalų eilučių skaičių ir išplėsti įvedant tekstą.

Maksimalių simbolių valdymas

Teksto laukas(
  maksimalus ilgis: 4,
),

Nustačius „maxLength“ ypatybę, užtikrinamas maksimalus ilgis ir pagal nutylėjimą į „TextField“ pridedamas skaitiklis.

Išplečiamojo „TextField“ formavimas

Kartais mums reikia „TextField“, kuris išplečiamas, kai viena eilutė užbaigiama. „Flutter“ tai šiek tiek keista (dar lengva) padaryti. Norėdami tai padaryti, mes nustatėme „maxLines“ nulinę reikšmę, kuri pagal nutylėjimą yra 1. Nulio nustatymas nėra dalykas, prie kurio mes esame labai įpratę, tačiau nepaisant to, tai lengva padaryti.

Pastaba: „MaxLines“ nustatant tiesiogine verte, ji bus išplėsta iki numatytojo skaičiaus eilučių.

Teksto laukas(
  „MaxLines“: 3,
)

Neaiškus tekstas

Norėdami užtemdyti tekstą „TextField“, nustatykite „obscureText“ tiesą.

Teksto laukas(
  obscureText: tiesa,
),

Ir galiausiai, teksto lauko dekoravimas

Iki šiol mes sutelkėme dėmesį į funkcijas, kurias siūlo „Flutter“. Dabar pereisime prie to, kad sugalvotume išgalvotą „TextField“ ir nesakytume „ne“ savo dizaineriui.

Papuošdami „TextField“, naudojame dekoravimo ypatybę, kuri užima „InputDecoration“. Kadangi „InputDecoration“ klasė yra didžiulė, bandysime greitai peržvelgti daugumą svarbių savybių.

Norėdami pateikti informaciją vartotojui, naudokite užuominos ir etiketės savybes

Tiek užuomina, tiek etiketė yra eilutės, kurios padeda vartotojui suprasti informaciją, kurią reikia įvesti į teksto lauką. Skirtumas yra tas, kad užuomina išnyksta vartotojui pradėjus rašyti, o etiketė plūduriuoja virš teksto lauko.

UžuominaEtiketė

Galite pridėti piktogramas naudodami „icon“, „prefixIcon“ ir „suffixIcon“

Galite pridėti piktogramas tiesiai į „TextFields“. Vietoje teksto taip pat galite naudoti prefixText ir suffixText.

Teksto laukas(
  apdaila: „InputDecoration“ (
    piktograma: piktograma (Icons.print)
  ),
),
Piktograma naudojant piktogramos ypatybę
Teksto laukas(
  apdaila: „InputDecoration“ (
    prefixIcon: Piktograma (Icons.print)
  ),
),
Piktograma naudojant „prefixIcon“ ypatybę

Panašiai kaip ir bet kuriame kitame valdiklyje, vietoje „prefixIcon“ naudokite „priešdėlis“

Norėdami vietoj piktogramos naudoti bendrą valdiklį, naudokite priešdėlio lauką. Vėlgi be aiškios priežasties pridėkime apskrito progreso rodiklį „TextField“.

Teksto laukas(
  apdaila: „InputDecoration“ (
    priešdėlis: CircularProgressIndicator (),
  ),
),

Kiekviena nuosavybė, pavyzdžiui, užuomina, etiketė ir tt, turi savo atitinkamus stiliaus laukus

Norėdami stiliaus užuominą, naudokite hintStyle. Norėdami stiliuoti etiketę, naudokite „labelStyle“.

Teksto laukas(
  apdaila: „InputDecoration“ (
    hintText: „Demo text“,
    hintStyle: TextStyle (fontWeight: FontWeight.w300, spalva: Colors.red)
  ),
),

Pastaba: Nors aš tai padariau šiame pavyzdyje, paprastai nekeiskite užuominos spalvos, nes ji vartotojams kelia painiavą.

Naudokite „helperText“, jei nenorite etiketės, bet norite nuolatinio pranešimo vartotojui.

Teksto laukas(
  apdaila: „InputDecoration“ (
    helperText: „Sveiki“
  ),
),

Norėdami pašalinti numatytąjį pabraukimą teksto lauke, naudokite „decoration: null“ arba „InputDecoration.collapsed“.

Naudokite juos norimam pabraukimui teksto lauke pašalinti.

Teksto laukas(
  apdaila: InputDecoration.collapsed (hintText: "")
),

Norėdami suteikti „TextField“ kraštą, naudokite „border“

Teksto laukas(
  apdaila: „InputDecoration“ (
    kraštas: „OutlineInputBorder“ ()
  )
),

Galite padaryti daugybę dekoracijų, kurias galite padaryti toliau, tačiau mes negalime visko aptarti viename straipsnyje. Bet tikiuosi, kad tai leidžia suprasti, kaip lengva pritaikyti „Flutter“ teksto laukus.

Štai šis straipsnis! Tikiuosi, kad jums tai patiko ir palikite keletą gniaužtų, jei tai padarėte. Sekite mane, jei norite pamatyti daugiau straipsnių apie „Flutter“, ir komentuokite, jei norite gauti atsiliepimų apie šį straipsnį.

Nesivaržykite peržiūrėti ir kitų mano profilių bei straipsnių:

„Twitter“

„GitHub“

Kai kurie kiti mano straipsniai