Все, что вы можете знать о TextField во Flutter

Flutter

предисловие

Здравствуй, привет, все здесь бывший трудно заставитьAndroidразработан, изначальноAndroidЯ работала с удовольствием, но на меня повлияли некоторые влияния и я сменила профессию😂, но я просто не могу позволить себе еду, и я не сдамся, если не смогу найти работуAndroidРазвивать! ,FlutterТакой ароматный! ! я учу себяFlutterС тех пор меня вдохновляли статьи многих старших братьев, поэтому я также начал писать статьи и делиться ими со студентами, которым также нужна помощь.

Коробка ввода текста текстового поля

TextFieldЯ думаю, что все знакомы с полем ввода текста, поэтому эта статья поможет вам изучить его более внимательно.TextFieldвсе из.

Рекомендуемое время чтения:Все в порядке, давайте посмотрим

Как использовать текстовое поле

 Widget build(BuildContext context) {
    return Container(child: TextField());
}

Вы закончили? наивно, то, что этот код собирает, является сообщением об ошибке, сообщением об ошибке после уточнения

I/flutter ( 7877): No Material widget found.`
I/flutter ( 7877): TextField widgets require a Material widget ancestor.
I/flutter ( 7877): Material itself, such as a Card, Dialog, Drawer, or Scaffold.

Эту ошибку легко решить,TextFieldнужно бытьMaterialМожно использовать пакет компонентов, мы можем использоватьCard,Dialog,Drawer,Scaffold, даже напрямую используяMaterial. Но нам не нужно оборачивать его напрямую, покаTextFieldНайдите его, посмотрев вверх при рендерингеMaterialКомпоненты в порядке.

01

Текстовые поля Дополнительные параметры

const TextField({
    Key key,
    this.controller,
    this.focusNode,
    this.decoration = const InputDecoration(),
    TextInputType keyboardType,
    this.textInputAction,
    this.textCapitalization = TextCapitalization.none,
    this.style,
    this.textAlign = TextAlign.start,
    this.textDirection,
    this.autofocus = false,
    this.obscureText = false,
    this.autocorrect = true,
    this.maxLines = 1,
    this.maxLength,
    this.maxLengthEnforced = true,
    this.onChanged,
    this.onEditingComplete,
    this.onSubmitted,
    this.inputFormatters,
    this.enabled,
    this.cursorWidth = 2.0,
    this.cursorRadius,
    this.cursorColor,
    this.keyboardAppearance,
    this.scrollPadding = const EdgeInsets.all(20.0),
    this.dragStartBehavior = DragStartBehavior.down,
    this.enableInteractiveSelection,
    this.onTap,
    this.buildCounter,
  })

maxLength/maxLengthEnforced/inputFormatters

02
Небольшой совет: если вы хотите ограничить количество слов и не хотите, чтобы метка счетчика находилась в правом нижнем углу, вы можете использоватьinputFormatters

inputFormatters: [LengthLimitingTextInputFormatter(20)]

inputFormattersИспользуется для ограничения входного контента, мы можем настроить тот, который принимает только входной цифровой контент.inputFormatters

class NumberFormatter extends TextInputFormatter {

  bool isNumber(String value) {
    return RegExp('^[0-9]*\$').hasMatch(value);
  }

  @override
  TextEditingValue formatEditUpdate(
      TextEditingValue oldValue, TextEditingValue newValue) {
    String value = newValue.text;
    return isNumber(value) ? newValue : oldValue;
  }
}

obscureText/autofocus/focusNode

  1. obscureTextИспользуется для скрытия вводимого содержимого, как правило, это свойство необходимо устанавливать при вводе пароля.
  2. autofocusИспользуется для установки автоматического получения фокуса, по умолчаниюfalse. Примечание. НастройкиfocusNodeПосле этого свойство становится недействительным.
  3. focusNodeиспользуется для контроляTextFieldФокус, вы также можете управлять программной клавиатурой, чтобы она появлялась и скрывалась~
    03
    04
    Если на странице несколькоTextFieldтакже можно использоватьfocusNodeконтролировать, какойTextFieldсфокусироваться
    05
    focusNodeВы также можете получить состояние фокуса ~
FocusNode focusNode = FocusNode();
focusNode.addListener(() {
      if (focusNode.hasFocus)
        print('获得焦点');
      else
        print('失去焦点');
});

cursorWidth/cursorRadius/cursorColor

06

  • cursorWidthустановить ширину курсора
  • cursorRadiusУстановить закругленные углы курсора
  • cursorColorустановить цвет курсора

enabled/enableInteractiveSelection

  • enabledОтключить ли поле ввода
  • enableInteractiveSelectionзначениеtrueВы можете долго нажимать, чтобы выбрать копирование и вставку,falseинвалид.

onTap/onSubmitted/onEditingComplete

  • onTapОбратный вызов для нажатия на поле ввода
TextField(
    onTap: () {
       print('onTap()');
}
//单击时
I/flutter (14649): onTap()
I/flutter (14649): onTap()
  • onSubmittedОбратный вызов для нажатия кнопки подтверждения программной клавиатуры Обратите внимание, что подтверждение здесь может бытьdone,search,goЖдать
 TextField(   
     onSubmitted: (value) {
        print('value:' + value);
})
I/flutter (14978): value:苏武难飞
I/flutter (14978): value:苏武难飞

Следует также отметить, что отдельная регистрацияonSubmittedПри нажатии программная клавиатура будет закрыта ~

  • onEditingCompleteОбратный вызов нажатия кнопки подтверждения программной клавиатуры 😂 Этот способ и описанный вышеonSubmittedРазница в том, что
  1. нетvalueПерезвоните
  2. Не закрывает виртуальную клавиатуру после нажатия Применимые сценарии Например: текущая страница имеет дваTextFieldОдин отвечает за имя пользователя, а другой отвечает за пароль.После ввода имени пользователя пользователь может, естественно, щелкнуть кнопку на программной клавиатуре, чтобы сфокусироваться на поле пароля.
TextField(
    onEditingComplete: () {
       print('onEditingComplete()');
       FocusScope.of(context).requestFocus(focusNode);
},
    textInputAction: TextInputAction.next),
TextField(focusNode: focusNode)

I/flutter (15170): onEditingComplete()
I/flutter (15170): onEditingComplete()

textInputAction/textCapitalization/textAlign/textDirection

  • textInputActionИспользуется для установки значка программной клавиатуры.Search,Next,go,previousПодождите, важно отметить, что частьInputActionможет быть толькоAndroidПлатформа имеет некоторыеInputActionможет быть толькоiOSплатформа есть.
  • textCapitalizationИспользуется для управления заглавными буквами вводимого пользователем текста.
    07
  • textAlignвыравнивание текста Это на самом деле очень легко понять, как и оригиналAndroidсерединаGravity, эта глава занимаетcenterВозьмите небольшой пример.
    08
  • textDirectionуправлять направлением текста

style/decoration

  • style

Постепенно к главному событию ~,styleИспользуется для управления стилем ввода текста, например

09

  • decorationИспользуется для управления стилем поля ввода давайте сделаем оченьMaterial Designполе ввода~
 TextField(
    decoration: InputDecoration(labelText: 'Name')
)

10
InputDecorationФункция очень богатая, мы также можем добавитьborderатрибуты, чтобы сделать наше поле ввода болееMaterialЧувствовать.

border

  • OutlineInputBorder
TextField(
   decoration: InputDecoration(labelText: 'Name',border:OutlineInputBorder())
)

11

вау~ Осу! Не любите навороты и хотите закругленные углы? нет проблем~
 TextField(
    decoration: InputDecoration(hintText: 'Name',border: OutlineInputBorder(borderRadius:BorderRadius.all(Radius.circular(16.0)))))

12

Хотите изменить цвет границы? Просто~ Есть два способа сделать это
  1. изменение по свойству
  TextField(
      decoration: InputDecoration(
          labelText: 'Name',
          labelStyle: TextStyle(color: Colors.red),
          focusedBorder: OutlineInputBorder(
              borderSide: const BorderSide(color:Colors.red)),
          enabledBorder: OutlineInputBorder(
              borderSide: const BorderSide(color:Colors.red))))

13
Примечание: Изменяется индивидуальноborderнеэффективен и будетenabledBorderа такжеfocusedBorderпокрытый.

  1. пройти черезThemeИзменять
Theme(
   data: ThemeData(primaryColor: Colors.red),
   child: TextField(
       decoration: InputDecoration(
           labelText: 'Name', border: OutlineInputBorder())),
)

13

Также измените толщину границы? Посыпать водой ~
TextField(
    decoration: InputDecoration(
        labelText: 'Name',
        labelStyle: TextStyle(color: Colors.red),
        focusedBorder: OutlineInputBorder(
            borderSide: const BorderSide(
                color: Colors.red, width: 3.0)),
        enabledBorder: OutlineInputBorder(
            borderSide: const BorderSide(
                color: Colors.red, width: 3.0))))

14

  • UnderlineInputBorder

Выражение такое же, как и стиль по умолчанию, и изменение цвета и толщины угла также такое же, какOutlineInputBorderПоследовательный~

Icon/prefixIcon/suffixIcon

15
Маленький совет:suffixIconМожет использоваться для очистки поля ввода ×

suffixText/labelText/counterText/errorText/helperText/prefixText/hintText

16
Маленький совет:errorTextа такжеhelperTextКогда содержание толькоerrorTextвступит в силу

filled/fillColor

17

maxLines

FlutterсерединаTextFieldФорма ввода представления по умолчанию — однострочный ввод, если установитьmaxLinesШерстяная ткань? Пожалуйста, смотрите картинку 😂~

18
мы устанавливаемmaxLinesПосле этого общая высота увеличивается, что, очевидно, не является тем эффектом, который нам нужен.Мы хотим, чтобы ввод автоматически переносился, когда он превышает одну строку, как нативныйAndroidизEditTextМол, как это сделать, на самом деле очень просто, вилка-┗|`О'|┛ причитать~~
19

onChanged/TextEditingController

Как обрабатывать ввод текста, у нас есть два способа.

  • onChangedПерезвоните

TextField вызывает свой обратный вызов onChanged всякий раз, когда пользователь вводит текст. Вы можете обработать этот обратный вызов, чтобы увидеть, что ввел пользователь. Например, если вы вводите текст в поле поиска, вам может потребоваться обновлять результаты поиска по мере того, как пользователь вводит текст.

TextField(onChanged: (value) {
    print('value:  ${value}');
}

I/flutter (23802): value:苏
I/flutter (23802): value:苏武
I/flutter (23802): value:苏武难
I/flutter (23802): value:苏武难飞

Более мощный (но более совершенный) подход заключается в предоставлении TextEditingController в качестве свойства контроллера TextField. По мере того, как пользователь печатает, текст контроллера и свойства выбора постоянно обновляются. Чтобы получать уведомления об изменении этих свойств, прослушивайте контроллер с помощью метода addListener контроллера. (Если вы добавляете прослушиватель, не забудьте удалить его в методе dispose вашего объекта State).

TextEditingController _controller = TextEditingController();
_controller.addListener(() {
    String text = _controller.text;
    int length = text.length;
    print('text: ${text} length:${length}');
    if (length >= 5) {
      _controller.clear();
    }
});

I/flutter (23802): text: 苏 length:1
I/flutter (23802): text: 苏武难飞 length:4
I/flutter (23802): text: 苏武难飞帅 length:5
I/flutter (23802): text:  length:0

постскриптум

На этом содержание этой статьи заканчивается, хотя я больше не буду этого делатьAndroidразработки, но я все еще люблю скучать по дням разработки. Поставьте перед собой небольшую цель, надеюсь, что во второй половине годаНаггетссообщество имеет50Нравится 😂

Категории