Теперь во многих приложениях необходимо ввести код подтверждения, и пользовательский интерфейс этого кода подтверждения популярен благодаря необычным полям ввода (Ведь главное противоречие мобильной разработки — это противоречие между растущей фантазией дизайнеров и отсталой разработкой.), который, естественно, используется Flutter как кроссплатформенное решение. Основываясь на принципе создания меньшего количества колес и большего копирования, я хотел найти элемент управления проверочным кодом, который можно было бы использовать напрямую, но я искал его.Githubа такжеSOСменных элементов управления не обнаружено.
Если у вас нет колес, сделайте их сами!
Во-первых, существует три типа пользовательских интерфейсов для кодов подтверждения.
- подчеркивать
- свободный каркас (соседние прямоугольники не пересекаются)
- Подходит для каркаса (соседние прямоугольники пересекаются по оси Y)
Хотя есть некоторые различия в пользовательском интерфейсе, фактическое использование похоже. Прежде всего, нам нужен виджет, который может принимать ввод, поэтому TextField идеален. Однако отрисовку TextField нельзя напрямую перегрузить или превратить в InVisible, как в Android, тогда мы сделаем весь отрисовываемый контент прозрачным, чтобы пользователь выглядел как пустой.
Следующие шаги очень просты, просто нарисуйте ввод, полученный TextField, на виджете, который мы фактически отображаем. Так же, как три анимации ниже
На самом деле основная идея очень проста и не нуждается в таком количестве теорий. 😂
плагин был загружен наdart packages, вы можете добавить следующий код для использования
dependencies:
pin_input_text_field: ^0.0.1
PR и вопросы приветствуются,GitHub.com/tin OG UO/pin…