Дълбоко потапяне в трептене TextField

Урок за силата на TextFields във Flutter

Това е втората статия от поредица от статии, обясняваща подробно някои от предложенията на джунджурия Flutter и съвети и трикове за тях. В последната статия разгледахме подробно джаджата ListView. В тази статия навлизаме в джаджата Flutter TextField изчерпателно и откриваме характеристиките и възможните персонализиране на нея.

Въведение в TextField

TextField джаджа позволява събиране на информация от потребителя. Кодът за основно TextField е толкова прост, колкото:

Текстово поле()

Това създава основно TextField:

Извличане на информация от TextField

Тъй като TextFields нямат идентификатор като в Android, текстът не може да бъде извлечен при поискване и вместо това трябва да се съхранява в променлива при промяна или използване на контролер.

  1. Най-лесният начин да направите това е да използвате метода onChanged и да съхраните текущата стойност в обикновена променлива. Ето примерния код за него:
Стойност стойност = "";
Текстово поле(
  onChanged: (текст) {
    стойност = текст;
  }
)

2. Вторият начин да направите това е да използвате TextEditingController. Контролерът е прикачен към TextField и ни позволява да слушаме и контролираме и текста на TextField.

TextEditingController контролер = TextEditingController ();
Текстово поле(
  контролер: контролер,
)

И можем да слушаме промените, използвайки

controller.addListener (() {
  // Направете нещо тук
});

И използвайте или задайте стойности с помощта

печат (controller.text); // Печат на текущата стойност
controller.text = "Демо текст"; // Задаване на нова стойност

Други обратни повиквания от TextField

Приложението TextField предоставя и други обратни обаждания като

  1. onEditingCompleted
  2. onSubmitted
onEditingComplete: () {},
onSubmitted: (стойност) {},

Това са обратни повиквания, призовани за действия, например когато потребителят натисне бутона „Готово“ в iOS.

Работа с фокус в TextFields

Ако "фокусирате" върху TextField означава, че TextField е активен и всеки вход от клавиатурата ще доведе до данни, въведени във фокусираното TextField.

1. Работа с автофокус

За да фокусирате автоматично на TextField, когато джаджата е създадена, задайте полето за автоматично фокусиране на true.

Текстово поле(
  автофокус: вярно,
),

Това задава фокуса върху TextField по подразбиране.

Фокусът се измества по подразбиране към TextField

2. Работа с персонализирани промени в фокуса

Ами ако искаме да променим фокуса върху търсенето, а не само автофокуса? Тъй като се нуждаем от някакъв начин да препратим към кое TextField искаме да се съсредоточим следващото, ние прикрепяме FocusNode към TextField и го използваме за превключване на фокуса.

// Инициализиране извън метода на изграждане
FocusNode nodeOne = FocusNode ();
FocusNode nodeTwo = FocusNode ();
// Направете това вътре в метода на изграждане
Текстово поле(
  focusNode: nodeOne,
),
Текстово поле(
  focusNode: nodeTwo,
),
RaisedButton (
  onPress: () {
    FocusScope.of (контекст) .requestFocus (nodeTwo);
  }
  дете: Текст („Следващо поле“),
),

Създаваме два фокусни възла и ги прикрепяме към TextFields. Когато бутонът бъде натиснат, използваме FocusScope, за да поискаме фокусиране към следващото TextField.

Фокусът се променя при натискане на бутона

Промяна на свойствата на клавиатурата за текстови полета

TextField in Flutter ви позволява да персонализирате свойства, свързани и с клавиатурата.

1. Тип клавиатура

TextField ви позволява да персонализирате типа клавиатура, който се показва, когато TextField бъде приведен във фокус. За това променяме свойството на клавиатурата.

Текстово поле(
  typeType: TextInputType.Number,
),

Видовете са:

  1. TextInputType.text (Нормална пълна клавиатура)
  2. TextInputType.number (Цифрова клавиатура)
  3. TextInputType.emailAddress (Нормална клавиатура с "@")
  4. TextInputType.datetime (Цифрова клавиатура с “/” и “:”)
  5. TextInputType.numberWithOptions (Цифрова клавиатура с опции за активиран подписан и десетичен режим)
  6. TextInputType.multiline (Оптимизира за многоредова информация)

2. TextInputAction

Промяната на textInputAction на TextField ви позволява да промените бутона за действие на самата клавиатура.

Като пример:

Текстово поле(
  textInputAction: TextInputAction.continueAction,
),

Това причинява бутон „Готово“ да бъде заменен с бутон „Продължи“:

Или

Текстово поле(
  textInputAction: TextInputAction.send,
),

Причини

Пълният списък е твърде голям, за да се показва тук, но не забравяйте да го проверите.

3. Автокорекция

Активира или деактивира автоматично поправка за конкретния TextField. Използвайте полето за автоматично коригиране, за да зададете това.

Текстово поле(
  autocorrect: невярно,
),

Това ще деактивира и предложенията.

4. Капитализиране на текст

TextField предоставя няколко опции за това как да се използват главни букви във входа от потребителя.

Текстово поле(
  textCapitalization: TextCapitalization.sentences,
),

Видовете са:

  1. TextCapitalization.sentences

Това е нормалният тип главни букви, който очакваме, като първата буква от всяко изречение се изписва с главна буква.

2. TextCapitalization.characters

Използва главни букви всички знаци в изреченията.

3. TextCapitalization.words

Използва главни букви на първата буква от всяка дума.

Опции за текст, подравняване и опции на курсора

Flutter позволява персонализиране, което се отнася до стила и подравняването на текст вътре в TextField, както и курсора в TextField.

Подравняване на текст вътре в TextField

Използвайте свойството textAlign, за да коригирате къде се намира курсорът вътре в TextField.

Текстово поле(
  textAlign: TextAlign.center,
),

Това кара курсорът и текстът да стартират в средата на TextField.

Това има обичайните свойства за подравняване: начало, край, ляво, дясно, център, оправдание.

Стилизиране на текста в TextField

Използваме свойството стил, за да променим как изглежда текстът в TextField. Използвайте го, за да промените цвета, размера на шрифта и т.н. Това е подобно на свойството стил в текстовата джаджа, така че няма да отделяме твърде много време за изследването му.

Текстово поле(
  стил: TextStyle (цвят: Colors.red, fontWeight: FontWeight.w300),
),

Промяна на курсора в TextField

Курсорът може да се настройва директно от приспособлението TextField.

Имате право да променяте цвета на курсора, ширината и радиуса на ъглите. Например, тук правя кръгъл червен курсор без видима причина.

Текстово поле(
  cursorColor: Colors.red,
  cursorRadius: Radius.circular (16.0),
  cursorWidth: 16.0,
),

Контрол на размера и максималната дължина в TextField

TextFields могат да контролират максималния брой знаци, написани вътре, максималният брой редове и да се разширяват, когато текстът е въведен.

Контрол на макс символи

Текстово поле(
  maxLength: 4,
),

Чрез задаване на свойството maxLength се налага максимална дължина и по подразбиране се добавя брояч на TextField.

Осъществяване на разширяващо се TextField

Понякога се нуждаем от TextField, който се разширява, когато един ред е завършен. В Flutter е леко странно (но все пак лесно) да се направи. За целта задаваме maxLines на null, което е 1 по подразбиране. Задаването на нула не е нещо, с което сме много свикнали, но въпреки това е лесно да се направи.

Забележка: Задаването на maxLines на директна стойност ще я разшири до този брой редове по подразбиране.

Текстово поле(
  maxLines: 3,
)

Затъмняване на текст

За да скриете текста в TextField, задайте obscureText на true.

Текстово поле(
  obscureText: вярно,
),

И накрая, Декориране на TextField

До сега се съсредоточихме върху функциите, които Flutter предлага за въвеждане. Сега ще преминем към реално проектиране на фантастично TextField и да не казваме „не“ на вашия дизайнер.

За декориране на TextField използваме свойството за декорация, което взема InputDecoration. Тъй като класът InputDecoration е огромен, ще се опитаме бързо да разгледаме повечето важни свойства.

Използвайте свойствата на подсказка и етикет, за да дадете информация на потребителя

Както намекът, така и етикетът са низове, които помагат на потребителя да разбере информацията, която трябва да бъде въведена в TextField. Разликата е, че намекът изчезва, след като потребителят започне да пише, докато етикет плава над TextField.

намекетикет

Можете да добавяте икони, като използвате „икона“, „префиксИкон“ и „суфиксИкон“

Можете да добавяте икони директно в TextFields. Можете също да използвате префикстекст и суфикстекст вместо текст.

Текстово поле(
  украса: InputDecoration (
    икона: Икона (Icons.print)
  ),
),
Икона с помощта на свойството на иконата
Текстово поле(
  украса: InputDecoration (
    prefixIcon: Икона (Icons.print)
  ),
),
Икона с помощта на свойството prefixIcon

Подобно на всяка друга джаджа, използвайте „префикс“ вместо „префиксИкон“

За да използвате обща джаджа вместо икона, използвайте полето за префикс. Отново без видима причина, нека добавим кръгъл индикатор за напредък в TextField.

Текстово поле(
  украса: InputDecoration (
    префикс: CircularProgressIndicator (),
  ),
),

Всяка собственост като подсказка, етикет и т.н. има съответните полета за стил

За да оформите намек, използвайте hintStyle. За да оформите етикет, използвайте labelStyle.

Текстово поле(
  украса: InputDecoration (
    hintText: "Демо текст",
    hintStyle: TextStyle (fontWeight: FontWeight.w300, цвят: Colors.red)
  ),
),

Забележка: Въпреки че съм го направил в този пример, обикновено не променяйте цвета на намека, тъй като е объркващ за потребителите.

Използвайте „helperText“, ако не искате етикет, но искате трайно съобщение за потребителя.

Текстово поле(
  украса: InputDecoration (
    helperText: "Здравей"
  ),
),

Използвайте „decoration: null“ или InputDecoration.collapsed, за да премахнете подчертаното подчертаване в TextField

Използвайте ги, за да премахнете подчертаното подчертаване на TextField.

Текстово поле(
  декорация: InputDecoration.collapsed (hintText: "")
),

Използвайте „граница“, за да дадете граница на TextField

Текстово поле(
  украса: InputDecoration (
    граница: OutlineInputBorder ()
  )
),

Има огромно количество декорация, което можете да направите по-нататък, но не можем да влезем във всичко в една статия. Но се надявам това да стане ясно да разберем колко лесно е да персонализирате Flutter TextFields.

Това е за тази статия! Надявам се да ви е харесало и да оставите няколко плесни, ако сте го направили. Следвайте ме за още статии на Flutter и коментирайте всякаква обратна връзка, която може да имате относно тази статия.

Чувствайте се свободни да разгледате и другите ми профили и статии:

кикотене

GitHub

Някои от другите ми статии