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

На изображении выше обратите внимание на второй элемент ListView (профиль с именем «Dhers»), именно здесь вы должны увидеть видимое перекрытие между двумя элементами. Именно этого эффекта мы и добьемся сегодня.

Прежде чем мы начнем

Если вы хотите писать код, рассмотрите возможность клонирования проекта с моего GitHub, здесь: https://github.com/Coffiie/personal_projects/tree/develop/code_along/listview_ui_tutorial_gh

Пожалуйста, прокомментируйте ниже, если вы хотите полный исходный код, и я предоставлю его вам.

После клонирования обязательно запустите «flutter pub get».

Этот проект совместим с Flutter v3.10.5.

Обзор проекта:

После открытия проекта вы увидите 3 файла:

  • main.dart: отвечает за инициализацию приложения и вызов HomePage.
  • mock_data.dart: содержит фиктивные данные, необходимые для построения ListView.
  • home_page.dart: отвечает за построение ListView.builder() и отдельных элементов внутри списка.

Обзор приложения:

Теперь, когда мы знаем проект, мы можем запустить приложение и увидеть пользовательский интерфейс.

Это список того, что мы хотели бы сделать в течение дня.

Конструктор ListView.builder отвечает за построение этого представления.

Теперь, когда мы разобрались с приложением, пришло время реализовать стековый макет.

Шаг 1 — Оберните элемент ListView с помощью Align

В приложении не должно быть визуальных изменений после того, как вы завернули элемент ListView в виджет Align.

Шаг 2 — Присвойте ему heightFactor 0,8.

После этого изменения ваше приложение должно выглядеть так.

Вот и все, ваши элементы ListView теперь располагаются друг над другом!

Шаг 3 — Сделайте их похожими на папки (для удовольствия)

С этим изменением ваше приложение будет выглядеть так:

Сумасшедший, верно? Похоже, что папки расположены друг над другом.

И вот оно! Теперь вы можете создавать потрясающие дизайны ListView. Поэкспериментируйте с этим свойством и отправьте мне личное сообщение в LinkedIn, если вам нужна помощь. Я также хотел бы увидеть ваши приложения, использующие этот простой хак.

Если вам понравился урок..

Пожалуйста, следите за мной здесь и в моих социальных сетях!
LinkedIn: https://www.linkedin.com/in/rawahamuhammad/
Github: https://github.com/coffiie
Средство: @RawahaMuhammad