Компоновка виджетов

В FlutterFlow создание сложного пользовательского интерфейса часто включает в себя объединение простых виджетов в более сложные композиции. В то время как атомарные виджеты, такие как Text, Button, Image и Icon, являются строительными блоками вашего UI, для организации этих атомарных виджетов в структурированный макет вы будете использовать молекулярные виджеты, такие как Row, Column и Stack.

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

Молекулярные виджеты: Row, Column и Stack

Для начала компоновки более сложных интерфейсов FlutterFlow предоставляет важные молекулярные виджеты, такие как Row, Column и Stack. Эти виджеты позволяют вам контролировать расположение атомарных виджетов в вашем приложении.

• Row: Этот виджет выравнивает своих детей горизонтально в одной линии, слева направо. Он полезен для создания макетов, где элементы должны быть размещены рядом, таких как иконки с метками или кнопки в панели инструментов.

• Column: Этот виджет выравнивает своих детей вертикально сверху вниз. Он идеально подходит для создания списков элементов или размещения разделов страницы вертикально.

• Stack: Этот виджет позволяет наложить виджеты друг на друга. Он идеален для создания наложенных эффектов, таких как размещение текста поверх изображения или добавление значка к значку.

к сведению

Узнайте больше о том, как компоновать виджеты с помощью Row, Column & Stack.

Расширенная композиция: Списки и Сетки

По мере того как вы становитесь более знакомыми с использованием молекулярных виджетов, таких как Row, Column и Stack, вы можете начать работать с Lists и Grids. Эти виджеты специально предназначены для работы с большим набором данных или динамического контента, что делает их необходимыми для более сложных макетов.

• Списки: В то время как Column полезен для вертикального стекирования нескольких элементов, ListView разработан для обработки потенциально бесконечных элементов, позволяя контенту прокручиваться. Это идеально подходит для приложений чата, ленты новостей или любого списка, который может превысить размер экрана. Одним из ключевых преимуществ использования ListView является его встроенная поддержка ленивой загрузки.

Ленивая загрузка

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

• Сетки: GridView организует элементы в двумерную сетку. Он идеален для отображения элементов, таких как фотографии, продукты или любого другого типа контента, который выгодно представлен в сеточном формате, что делает его визуально привлекательным и удобным в навигации.

Списки и Сетки

Узнайте о продвинутых свойствах Списков и Сеток.