Макеты и виджеты во Flutter | OTUS

Макеты и виджеты во Flutter

Flutter_Headline_970x70-1801-567630.png

Виджеты — ядро механизма макетов Flutter. По сути, во Flutter практически всё является виджетами. Изображения, значки, текст — это виджеты. Невидимые элементы (строки, сетки, столбцы), которые упорядочивают видимые виджеты, сжимая и выравнивая их, — тоже виджеты. И даже модели макетов являются виджетами. На практике разработчик создает макет путем компоновки виджетов, что позволяет создавать более сложные виджеты. К примеру, на рисунке ниже мы видим 3 значка и надписи под каждым из них:

lakes_icons__2-1801-a24619.png

А вот на следующем скриншоте уже отображается визуальный макет, показывающий строку из трех столбцов, причем каждый столбец содержит значок и соответствующую надпись.

lakes_icons_visual__2-1801-1ebc04.png

Диаграмма дерева виджетов

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

dobavte_zagolovok_2-1801-15e149.png

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

В нашем примере каждый текстовый виджет (Text) помещается в Container для добавления полей. При этом все строки (Row) тоже помещаются в контейнер, что необходимо для добавления внутреннего отступа вокруг строки.

Оставшаяся часть UI из примера контролируется с помощью свойств. Хотите установить цвет значка? Используйте его цветовое свойство color. Хотите поменять шрифт, его цвет и ширину? Вам понадобится свойство Text.style и так далее. Таким образом, строки и столбцы имеют свойства, позволяющие указывать, каким образом их дочерние элементы выравниваются по горизонтали и вертикали, а также сколько места должно быть занято дочерним пространством.

Вывод

Подведя итог, скажем: — виджеты — классы, используемые для создания UI; — виджеты применяются как для элементов макета, так и для UI-элементов; — для построения сложных виджетов используют простые виджеты.

Источник: https://flutterdocs.ru/.

Не пропустите новые полезные статьи!

Спасибо за подписку!

Мы отправили вам письмо для подтверждения вашего email.
С уважением, OTUS!

Автор
0 комментариев
Для комментирования необходимо авторизоваться
Популярное
Сегодня тут пусто
🔥 Выгодные предложения!
Успейте начать обучение со скидкой 10%. Акция до 23.06 →