Посмотрите на использование одного из виджетов диалогового окна Flutter
Многое происходит под капотом, когда вы показываете то, что, как вы думаете, представляет собой простое диалоговое окно с некоторым текстом и некоторыми кнопками. Посмотрите на снимок экрана ниже, как темнеет фон, когда вы показываете пользователю небольшой блок с его сообщением и кнопками. Хотя в этой презентации задействован виджет AlertDialog, за кулисами работают и другие виджеты. В этой статье мы кратко обсудим, что на самом деле задействовано, а также дадим подробный обзор того, что составляет виджет AlterDialog.
Только скриншоты. Щелкните для Gists.
Как всегда, я предпочитаю использовать скриншоты, а не суть, чтобы показать код в своих статьях. Я считаю, что с ними легче работать и легче читать. Однако вы можете щелкнуть / коснуться их, чтобы увидеть код в сущности или в Github. По иронии судьбы, эту статью о мобильной разработке лучше читать на компьютере, чем на телефоне. Кроме того, мы программируем в основном на своих компьютерах; не на наших телефонах. Теперь.
Нет движущихся изображений Нет социальных сетей
Обратите внимание, что в этой статье будут файлы gif, демонстрирующие аспекты рассматриваемой темы. Однако сказано, что просмотр таких файлов gif невозможен при чтении этой статьи на таких платформах, как Instagram, Facebook и т. Д. Помните об этом и, возможно, прочтите эту статью на medium.com
Давай начнем.
Как описано в документации, виджет AlertDialog обычно передается как дочерний виджет высокоуровневой функции, называемой showDialog, которая затем отображает этот диалог и возвращает любой результат в виде объекта Future. См. ниже.
Фактически, функция showDialog вызовет еще одну функцию с именем showGeneralDialog, которая создает «маршрут» (версия экрана или страницы Flutter) для отображения диалоговое окно поверх текущего экрана или страницы. Обратите внимание: в функции showDialog видно, что для «затемнения» фона при отображении диалогового окна используется цвет Colors.black54.
Обычно используется высокоуровневая функция showDialog, потому что у нее есть средства для возврата результата из ответа, сделанного пользователем. Например, в примере кода (находится в Галерее Flutter) любое возвращаемое значение (то есть любая нажатая кнопка) отображается на панели закусок приложения. Вы можете видеть, что метод then () используется функцией showDialog для управления любым возвращаемым объектом Future.
«Дочерний» виджет, предоставляемый этой функции, является виджетом AlertDialog, который впервые отображается выше. Он снова указан ниже, но теперь с выделением значений, которые могут быть возвращены через навигатор, когда он «выходит» из текущего маршрута - значения, определенные функцией, называемой, showGeneralDialog. Посмотрите, как все это сочетается?
Глядя на сам класс AlertDialog, вы понимаете всю сложность простого отображения текста и нескольких кнопок, заканчивающихся еще одним виджетом под названием Dialog. Именно этот виджет принимает «контент», теперь воплощенный в виджете dialogChild.
Класс Dialog - это StatelessWidget, который, наконец, отображает диалоговое окно на экране. Однако с первого взгляда вы можете увидеть, что ряд других виджетов участвует в отображении назначенного контента.
Давайте рассмотрим дополнительные параметры, предлагаемые виджетом AlertDialog.
Сразу после прыжка есть именованный параметр shape. Лично мне нравится закруглять углы в моих диалоговых окнах. Ниже вы видите, как это делается с кодом, разделенным скриншотами «до и после». Обратите внимание: это пример, который также включает заголовок в диалоговом окне.
Пожалуйста, не думайте, что это просто текст и несколько кнопок, которые отображаются только в виджетах AlertDialog. Пример кода из пакета flutter_colorpicker использует три виджета AlertDialog для демонстрации своей функциональности - и это не какой-то текст и несколько кнопок. Вместо этого он предоставляет вам три разных способа визуального выбора цвета.
Вы можете видеть, что второй палитре цветов отведено все необходимое пространство. В параметрах EdgeInsets.all (0.0), нет места для заголовка и нет места вокруг самого средства выбора цвета. См. Ниже . Я позволил себе вольность и добавил закругленные углы для этого палитры цветов.
Также обратите внимание, что виджет SingleChildScrollView, показанный ниже, обычно используется для содержимого, которое в противном случае превысило бы доступное пространство. Он хорошо подходит для диалоговых окон, где в этом случае «содержимое» действительно превышает размер самого окна и, следовательно, требуется для прокрутки.
Цвет доступен для виджета AlertDialog с указанным параметром backgroundColor. Вы можете проявить творческий подход к форме и цвету диалогового окна, как показано в примере кода ниже.
Оповещение о стиле
Конечно, Flutter предоставляет именованные параметры, такие как titleTextStyle и titlePadding, для дальнейшего определения внешнего вида окна предупреждения. Это быстро демонстрируют два приведенных ниже снимка экрана.
Обратите внимание, что произойдет, например, если кто-то закомментирует явный стиль, определенный для параметра «content» ниже.
Держи. Краткий обзор общей функции мобильных приложений. Оставим это в надежде, что вы получили некоторое представление о такой фундаментальной функции мобильных приложений.
Ваше здоровье.
