Как спрятать клавиатуру во flutter

Обновлено: 25.01.2025

Я хотел бы скрыть клавиатуру при прокрутке SingleChildScrollView с сфокусированным TextFormField . Я добавил NotificationListener<ScrollNotification> поверх SingleChildScrollView и прислушался к ScrollStartNotification . Затем я вызываю FocusScope.of(context).requestFocus(FocusNode()) , чтобы скрыть клавиатуру.

Проблема возникает, когда TextFormField находится в нижней части экрана. Когда я нажимаю на нее, и она получает фокус, появляется клавиатура и перемещает SingleChildScrollView вверх, что снова запускает ScrollStartNotification и скрывает клавиатуру.

4 ответа

У меня есть табличное представление с источником данных/делегатом в другом файле. Кроме того, над табличным представлением есть строка поиска, принадлежащая первому файлу. Другими словами, чтобы скрыть клавиатуру при прокрутке, мне нужно было бы позвонить: [self.searchBar resignFirstResponder] Но.

В WP8, как скрыть программную клавиатуру, когда listbox прокручивается? Есть ли событие, которое можно обнаружить при прокрутке listbox?

Вместо того, чтобы делать с NotificationListener, оберните свой SingleChildScrollView внутрь GestureDetector и отключите клавиатуру вот так:

Мы создали этот простой виджет. Оберните свой прокручиваемый вид в этот виджет, и все готово.

Если вы проведете пальцем вверх, дельта будет отрицательной, поэтому это не вызовет увольнения, то же самое, если вы проведете пальцем очень медленно. Очевидно, вы можете настроить дельту, чтобы сделать ее более или менее отзывчивой. Кроме того, метод detach() выглядит намного лучше, чем предоставление нового FocusScope.

Я думаю, что лучше использовать NotificationListener для прослушивания прокрутки, а не просто нажмите

Похожие вопросы:

Я новичок в разработке iOS. Я хочу скрыть клавиатуру при нажатии за пределами TextField . Мой TextField находится в камере от UITableView . Я пытался следовать некоторым из этих ссылок, однако без.

У меня есть textbox в scrollviewer, я хочу скрыть виртуальную клавиатуру при прокрутке. клавиатура скрыта, когда нажимается scrollviewer, но не тогда, когда я прокручиваю. Я попытался переключить.

У меня есть табличное представление с источником данных/делегатом в другом файле. Кроме того, над табличным представлением есть строка поиска, принадлежащая первому файлу. Другими словами, чтобы.

В WP8, как скрыть программную клавиатуру, когда listbox прокручивается? Есть ли событие, которое можно обнаружить при прокрутке listbox?

Я использую клавиатуру Aware ScrollView , чтобы обернуть свой контент и избежать переполнения клавиатуры focused TextInput . Однако я хочу скрыть клавиатуру, если пользователь решит прокрутить.

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

В моем браузере веб-приложений flutter адресная строка не скрывается при прокрутке. Поддерживает ли flutter эту функцию?

Всем привет! Меня зовут Дмитрий Андриянов, я Flutter-разработчик в Surf.

В предыдущей статье про RenderObject я рассказал, как немного копнул в слой рендеринга и смог получать расположение и размеры любого виджета — даже динамического. Сегодня расскажу, как был написан слушатель появления/скрытия клавиатуры без нативного кода.

Эта статья будет вам полезна, если вы:

• Пишете на Flutter и хотите узнать, что находится у него под капотом.
• Интересуетесь, как MediaQuery предоставляет данные о UI.
• Хотите реализовывать интересные штуки на Flutter, покопавшись в нём на более глубоком уровне.

Зачем нам понадобилось написать слушатель без натива

В одном Flutter приложении нам нужно было отлавливать появление и скрытие клавиатуры — мы делали это с помощью плагина keyboard_visibility. Но в апреле, после очередного обновления Flutter, он сломался, потому что команда разработки не переехала на новую реализацию нативной интеграции. Прочие популярные решения из pub также завязаны на нативную часть, а повторно наступать на те же грабли не хотелось.

Мы решили разобраться, можно ли слушать клавиатуру силами Flutter. Чтобы не вносить много правок в существующий код, при разработке решения желательно было сохранить похожий на keyboard_visibility интерфейс.

Исследуем MediaQuery и копаем вглубь

Из MediaQuery мы можем получить данные о размерах системных UI-элементов, которые перекрывают дисплей:

Первая мысль — использовать MediaQuery.of(context).viewInsets при изменениях значения: 0 — клавиатура скрыта, иначе — видна. Но в момент обращения к MediaQueryData мы получим значение, а не Stream, который нужно слушать.

1. Для использования требуется контекст, что накладывает дополнительные ограничения. Например когда у вас есть модель данных связанная с UI, реагирующая на появление клавиатуры.
2. viewInsets не дает возможности подписаться на изменения значения.

Переходим в исходный код метода MediaQueryData of и видим:

В этой строке по дереву родителей ищется класс MediaQuery. У полученного виджета берутся и возвращаются данные в виде экземпляра MediaQueryData.

Смотрим в MediaQuery: оказывается, это наследник InheritedWidget, и он создаётся в разных виджетах:

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

Например, файл dialog:

Самый верхний MediaQuery создаётся в файле widgets/app.dart.
Класс _MediaQueryFromWindow:

Что здесь происходит:

1. Класс _MediaQueryFromWindowsState замешивает миксин WidgetsBindingObserver, чтобы использоваться в качестве наблюдателя за изменениями системного UI из Flutter.

2. В initState вызываем WidgetsBinding.instance.addObserver(this); — addObserver принимает на вход экземпляр наблюдателя. В данном случае this, так как текущий класс замешивает WidgetsBindingObserver.

3. WidgetsBindingObserver предоставляет методы, которые вызываются при изменении соответствующих метрик:
didChangeAccessibilityFeatures — вызывается при изменении набора активных на данный момент специальных возможностей в системе.
didChangeMetrics — вызывается при изменении размеров приложения из-за системы. Например, при повороте телефона или влиянии системного UI (появлении клавиатуры).
didChangeTextScaleFactor — вызывается при изменении коэффициента масштабирования текста на платформе.
didChangePlatformBrightness — вызывается при изменении яркости.

4. Самое главное, что объединяет эти методы, — в каждом из них вызывается setState. Это запускает метод build, заново строит объект MediaQueryData

и передает его вниз по дереву до места вызова MediaQuery.of(context).ИмяПоля:

Подробнее про биндинг можно прочесть в статье моего коллеги Миши Зотьева.

Вывод: мы можем получать изменения системного UI, используя WidgetsBinding и WidgetsBindingObserver.

Реализация слушателя клавиатуры

Начнём реализовывать слушатель клавиатуры на основе этих данных. Для начала создадим класс:

Добавим геттер bool — чтобы знать, видна ли клавиатура.

Во время его реализации я столкнулся с одной проблемой. Изначально запоминался текущий размер клавиатуры, чтобы внешний код мог получить его у экземпляра слушателя.

Мы знаем, что при видимой клавиатуре в viewInsets.bottom значение больше 0, при скрытой — 0.

bool get _isVisibleKeyboard => _currentKeyboardHeight > 0; выполняет проверку: если высота клавиатуры больше нуля, то она видна.

Но на некоторых устройствах с Android 9 при закрытии клавиатуры высота не всегда становилась 0. Открытая клавиатура могла передать значение 400, а закрытая — 150. А в следующий раз она передавала уже 0. Нестабильный и сложно уловимый баг.

Поэтому я решил отказаться от возможности получать размер клавиатуры из экземпляра слушателя и стал проверять:

Это решило проблему.

Теперь реализуем непосредственно прослушивание изменений для вызова колбэков:

Как и говорилось выше, благодаря didChangeMetrics мы знаем, что изменился системный UI. И проверяя, видна ли клавиатура, вызываем колбеки появления/сокрытия клавиатуры.

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

Полный код

Можно было реализовать только _changeListeners или всего один колбэк. Но перед нами стояла задача сохранить API в проекте, который уверенно двигался к релизу. Поэтому использование нового слушателя должно было принести минимум правок.

Мы в очередной раз увидели, что решить проблемы и реализовать интересные штуки можно без нативной реализации. Достаточно копнуть чуть глубже или просто изучить механизм работы того или иного виджета.

TextField позволяет собирать информацию от пользователя. Объявить базовый код TextField очень просто:

Это создает базовый компонент TextField:

Собирать информацию из TextField

Поскольку TextFields не имеет идентификатора, как в Android, текст не может быть извлечен по мере необходимости, и он должен быть сохранен в переменной или использовать контроллер при изменении.

1. Самый простой способ - использовать onChanged Метод обратного вызова, сохраните текущее значение TextField в переменной, ниже приведен пример кода.

2. Второй способ - использовать TextEditingController . Контроллер прикреплен к компоненту TextField, и мы можем отслеживать и контролировать текст TextField.

Затем вы можете использовать следующий код для отслеживания изменений:

Используйте контроллер, чтобы получить и установить текст:

Другие обратные вызовы TextField

TextField получает фокус

TextField получает фокус означает, что TextField активирован, и любой ввод с клавиатуры будет введен в сфокусированное TextField.

1. Получите фокус автоматически

Чтобы позволить TextField автоматически получать фокус при создании виджета, установите для свойства autofocus значение true.

2. Пользовательский переключатель фокуса

Что, если мы хотим, чтобы код менял фокус, а не просто получал фокус автоматически? Поскольку нам нужен какой-то способ обратиться к TextField, на котором мы хотим сфокусироваться, мы присоединяем FocusNode к TextField и используем его для переключения фокуса.

Здесь мы создали два узла фокуса и прикрепили их к TextField, при нажатии кнопки NextField используйте FocusScope Идите и подайте заявку на фокус для следующего TextField.

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

Во Flutter TextField позволяет настраивать свойства, связанные с клавиатурой.

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

TextField может изменять тип клавиатуры, когда клавиатура появляется. Используйте следующий код:

Есть несколько видов:

• TextInputType.text (Normal complete keyboard)
• TextInputType.number (A numerical keyboard)
• TextInputType.emailAddress (Normal keyboard with an “@”)
• TextInputType.datetime (Numerical keyboard with a “/” and “:”)
• TextInputType.multiline (Numerical keyboard with options to enabled signed and decimal mode)

2. Поведение кнопок клавиатуры.

Изменение textInputAction в TextField может изменить рабочие кнопки самой клавиатуры.

Полный список действий слишком длинный, поэтому я не буду его здесь показывать. При необходимости вы можете ввести класс TextInputAction для просмотра.

Включение или отключение автоматического исправления определенного текстового поля. Для настройки используйте поле автокоррекции. Это также отключит предложения ввода.

3. Сделайте текст заглавными.

TextField предоставляет несколько вариантов для использования заглавных букв в тексте, вводимом пользователем.

1.TextCapitalization.sentences

Это наиболее распространенный тип использования заглавных букв, когда первая буква каждого предложения переводится в верхний регистр.

Сделайте все символы в предложении заглавными.

3. TextCapitalization.words

Начинайте каждое слово с заглавной буквы.

Выравнивание текста

Используйте свойство textAlign, чтобы установить выравнивание курсора в TextField.

Курсор и текст начнутся в середине компонента TextField.

Есть и другие атрибуты, включаяstart, end, left, right, center, justify.

Текстовый стиль

Мы используем атрибут style, чтобы изменить внешний вид текста внутри TextField. Используйте его для изменения цвета, размера шрифта и т. д. Он похож на атрибут style в текстовом виджете, поэтому мы не будем тратить много времени на его изучение.

Изменить стиль курсора

Курсор можно настроить прямо из виджета TextField. Вы можете изменить цвет, ширину и радиус курсора в углу. Например, здесь я нарисовал круглый красный курсор.

Управляйте максимальным количеством символов

После установки свойства maxLength TextField по умолчанию добавит счетчик длины.

Масштабируемое текстовое поле

Иногда нам нужно, чтобы TextField расширялся после завершения строки. Во Flutter это немного странно (но легко). Для этого мы устанавливаем maxLines равным нулю, а значение по умолчанию - 1. Установка значения null - это не то, к чему мы привыкли, но это легко сделать.

Примечание. Установка для свойства maxLines определенного значения напрямую расширяет TextField до соответствующей максимальной строки.

Скрыть текстовое содержимое

Украсить текстовое поле

До сих пор мы сосредоточились на функциях ввода, предоставляемых Flutter. Теперь мы действительно создадим красивое текстовое поле. Чтобы украсить TextField, мы используем атрибут украшения с InputDecoration. Поскольку класс InputDecoration очень большой, мы постараемся быстро просмотреть наиболее важные свойства.

В предыдущей статье мы подключили Flutter SDK и создали hello world приложение. Сейчас создадим простое приложение где реализуем экран авторизации, простой механизм валидации логина и пароля и если валидация пройдёт успешно, то осуществить переход на следующий экран:

Создадим новый проект как было описано в предыдущей статье. Заменим содержимое файл \lib\main.dart на представленный ниже код:

Как и в Java у Dart есть точка входа с которой начинается запуск программы - это метод main(). Нотация => предназначена для более наглядного представления вызова функций. Функция runApp предназначена для создания и вывода на экран виджета, который мы создаём и передаём в качестве параметра.

Класс MyApp наследуется от StatelessWidget тем самым получает свойства неизменяемого виджета. При наследовании нужно переопределить метод создания виджета build(BuildContext context). MaterialApp - создаёт приложение которое, реализует принципы material design. В качестве маршрута по умолчанию в параметре home передадим класс Scaffold(), который реализует основную структура макета.

Если запустить этот код, то на экране будет отображён пустой белый экран с пометкой debug в правом верхнем углу:

Теперь разместим визуальные компоненты на экране. Как мы помним из первой стать во flutter все визуальные компоненты являются виджетами. Благодаря взаимовложенности виджетов друг в друга и строиться графический интерфейс.

Сейчас у нас есть пустой экран, создадим два поля для ввода текста и кнопку login.

Для того что бы выронить все элементы по центру экрана воспользуемся классом Center (строка 9). Для расположения все элементы в один столбец необходимо использовать класс Column в котором для выравнивания дочерних элементов по центру задаём значение параметра mainAxisAlignment: MainAxisAlignment.center (строки 10-11).

В класс Column можно передать массив виджетов которые будут отображаться внутри него в вертикальном порядке друг под другом (строка 12). Каждое полу ввода нужно ограничить по ширине, поэтому необходимо “завернуть” всё это в ещё один класс Container. У которого уже можно задать нужный параметр width (строка 19). В качестве параметров стиля для текста создадим две переменные _sizeTextBlack и _sizeTextWhite (строки 2-3).

Для поля ввода Email зададим параметр типа клавиатуры TextInputType.emailAddress, а для поля пароля выставим obscureText в true (строка 16 и 24).

Для отображение кнопки нам понадобиться отступ который мы сможем задать через класс Padding (строка 30).

В итоге у нас получиться следующий результат:

Далее реализуем простую логику валидации почты и пароля. Для хранения и передачи данных создадим в классе MyApp две переменные _email и _password:

У виджета TextFormField есть метод onSaved который возвращает значение поля ввода при изменениях. Это значение сохраняем в переменные _email и _password соответственно. Так же есть функция validator в которой можно реализовать логику отображения подсказки в случае если валидация не пройдена.

Обработаем событие нажатие на кнопку. В виджет MaterialButton есть функция onPressed который вызывается после нажатие кнопки. Для лаконичности кода вынесем обработку нажатия в отдельный метод submit.

Для того что бы провалидировать сразу все поля нужно создать дополнительный виджет Form. У него есть тип key, который создаёт контейнер для полей формы. Его будем хранить в поле formKey.

Реализуем метод submit(). В нём выполняется получение полей ввода и вызова метода validate():

После успешной валидации скрываем клавиатуру и открываем экран в который передадим значение логина и пароля:

Читайте также:

  
• Каковы функции квадратора мультиплексора сколько объектов отображается на одном мониторе макс в уис
  
• Выбор монитора fhd форум
  
• Введите с клавиатуры символьную строку и определите верно ли что она представляет собой правильную
  
• Телевизор haier не открывает флешку
  
• Как переключить управление с клавиатуры на джойстик