Перейти к основному содержимому

Составление виджетов

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

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

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

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

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

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

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

row-col-stack.png

к сведению

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

Продвинутая композиция: Lists & Grids​

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

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

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

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

Узнайте о продвинутых свойствах Lists & Grids.