Флаттер подбросить и запомнить один (стиль пользовательского интерфейса TextField)

TextFieldПо сути, это интерфейсный код.input, компонент поля ввода.

Фактически, базовое использование уже можно использовать ежедневно, глядя на API, и официальное объяснение API все еще очень ясно. (Программное обеспечение для перевода довольно мощное) 😬

Сценарий 1: В маленьком родительском пространстве

В этом случае нужно обратить внимание, нельзя даватьTextFieldДобавьте некоторые причудливые операции (включая границы, передние и задние значки и т. д.).

Если они добавлены, текст поля ввода не будет центрирован по вертикали, и независимо от того, какие свойства центрирования вы добавите, он не будет работать должным образом. И в этом случае вам нужно добавить специальный атрибутisDense, Функция заключается в том, чтобы заставить компонент отображаться нормально (включая вертикальное центрирование текста), когда пространство мало.

TextField(
    decoration: InputDecoration(
      isDense: true,
    )
)

В этом случае, если вам нужны такие стили, как границы и закругленные углы, разумным подходом должна быть реализация стилизованногоContainer, так какTextFieldродитель , и добавьте соответствующийpadding,потому чтоContainerЗакругленные углы не могут закрывать ввод (даже с компонентом переполнения он не будет делать то, что вы ожидаете).

Сценарий 2: Настройте стиль текста на входе

использовал этоTextFieldСтарший брат должен знать, что по умолчаниюEditing TextСтильчерный текст,нет цвета фона,черное подчеркивание.

Очевидно, что при повседневном использовании приложений этот стиль болезненный. Кто назвал меня Девой?

Давайте сначала посмотрим на оригинальный стиль.Давайте посмотрим на стиль ввода WeChat.Излишне говорить, что мне просто нравятся полутона. заниматься этим.

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

Изначально я собирался найти большого парня (Qian Maggot), который «решил проблему» в «определенной группе», чтобы решить эту проблему, но я сохранил здравомыслие и продолжил изучать этот компонент, и, наконец, я обнаружил контроль над это стильная вещь!

TextEditingController

Это контроллер, который флаттер использует для управления вводом текста, назначением, мониторингом, фокусом/размытием поля ввода Как я мог подумать, что эта штука также управляет стилем? ? Я случайно увидел его английский сEditing, а потом серьезно посмотрел на эту штуку.

я здесьTextEditingControllerВ исходном коде нашел этот абзац:

  /// Builds [TextSpan] from current editing value.
  ///
  /// By default makes text in composing range appear as underlined.
  /// Descendants can override this method to customize appearance of text.
  TextSpan buildTextSpan({TextStyle style , bool withComposing}) {

Приблизительное китайское значение заключается в том, что метод построения (метод) текущего вводимого текста, производительность по умолчанию — подчеркивание, и потомки могут переопределить этот метод, чтобы настроить производительность текста. (Я не закончил четвертый класс и до сих пор понимаю этот английский, и это здорово)

попробую написатьMyTextEditingControllerнаследоватьTextEditingControllerЗатем переписатьbuildTextSpanметод.

import 'package:flutter/material.dart';

class MyTextEditingController extends TextEditingController {

  MyTextEditingController({
    String text,
    this.editingTextStyle = const TextStyle(backgroundColor: Colors.black12),
  })
    : super(text: text);

// 增加editingTextStyle参数，让他随时可变自定义，默认灰色---↑↑↑↑↑↑↑↑↑↑↑↑↑
  final TextStyle editingTextStyle;

  @override
  TextSpan buildTextSpan({TextStyle style , bool withComposing}) {
    if (!value.composing.isValid || !withComposing) {
      return TextSpan(style: style, text: text);
    }
    // -----此处就是正在输入的样式
    final TextStyle composingStyle = style.merge(
      const TextStyle(decoration: TextDecoration.underline),
    );
    // -----↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓--------
    final TextStyle composingStyle = style.merge(editingTextStyle);
    // ---------------------------
    return TextSpan(
      style: style,
      children: <TextSpan>[
        TextSpan(text: value.composing.textBefore(value.text)),
        TextSpan(
          style: composingStyle,
          text: value.composing.textInside(value.text),
        ),
        TextSpan(text: value.composing.textAfter(value.text)),
      ]);
  }
}

написать новыйMyTextEditingController, вы можете начать использовать его.

final _inputController = MyTextEditingController();

TextField(
    controller: _inputController,
)

Взгляните на эффект:

чувствую себя комфортно~~~

Суммировать

Буду добавлять~~~