Список в виде плитки

Виджет ListTile содержит Заголовок, Подзаголовок, Ведущий значок и Замыкающий значок. Виджет ListTile обычно используется для заполнения ListView.

Например, вы можете использовать ListTile для отображения списка пунктов «Сделать» или электронных писем.

Вот пример того, как вы можете использовать виджет ListTile в своем проекте:

• Сначала перетащите виджет ListView с вкладки Layout Elements (на панели виджетов) или добавьте его непосредственно из дерева виджетов.
• Перетащите виджет ListTile с вкладки Base Elements и поместите его внутрь ListView.
• Выберите ListTile в дереве виджетов или в области холста.
• Перейдите в редактор свойств (в правой части экрана) и прокрутите вниз до раздела Заголовок.
• Измените свойство Text на Email.
• Прокрутите ниже и найдите раздел Subtitle. Измените свойство на From:xyz.

На данный момент в список добавлен один элемент. Чтобы заполнить ListView большим количеством элементов, просто скопируйте виджет ListTile.

Чтобы скопировать-вставить виджет ListTile:

• Выберите виджет ListTile.
• Щелкните на нем правой кнопкой мыши и выберите Копировать. Вы также можете использовать комбинацию клавиш Ctrl+C или Command+C.
• Выберите виджет ListView.
• Щелкните на нем правой кнопкой мыши и выберите Вставить. Вы также можете использовать комбинацию клавиш Ctrl+V или Command+V.

После добавления ряда элементов список, созданный с помощью ListTile, выглядит следующим образом:

Вы можете захотеть, чтобы виджет ListTile раскрывал список действий, которые можно выполнить на ListTile, когда пользователь проводит пальцем вправо. Используя свойства Slidable, вы можете добиться такого поведения.
Чтобы сделать ListTile скользящим:

• Выберите ListTile в дереве виджетов или в области холста.
• Перейдите в редактор свойств (в правой части экрана) и прокрутите вниз до раздела «Скользящие свойства«.
• Отметьте свойство Slidable (щелкните по нему).

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

Здесь приведены инструкции по добавлению отступов.

Используя различные свойства в разделе Style Properties, вы можете настроить ListTile в соответствии с вашим дизайном.

Здесь приведены инструкции по созданию стиля ListTile.

Здесь приведены инструкции по настройке заголовка.

Ниже приведены инструкции по настройке подзаголовка.

Ведущий значок появляется в начале (с левой стороны) ListTile.

Здесь приведены инструкции по добавлению ведущего значка.

Значок трейлинга отображается в конце (крайнем правом углу) тайла списка. По умолчанию значок в виде стрелки.

Вот пример того, как можно настроить значок прикрепления:

• Выберите ListTile в дереве виджетов или в области холста.
• Переместитесь в редактор свойств (в правой части экрана) и прокрутите вниз до раздела «Значок в виде стрелки«.
• Нажмите на кнопку Trailing Icon, найдите новый значок и выберите нужный значок.
• Установите размер значка, введя значение в свойство Icon Size.
• Чтобы изменить цвет, найдите свойство Icon Color, щелкните по флажку Unset, выберите цвет, а затем нажмите Use Selected Color. Или нажмите на Unset и введите Hex-код напрямую. Вы также можете выбрать цвет, нажав на кнопку Палитра и просто.

Посмотрите, как установить цвет из переменной в любое свойство цвета этого виджета.
Добавление действия

Чтобы выполнить какое-либо действие по щелчку на ListTile, добавьте Action во FlutterFlow. Инструкции по добавлению Action вы можете найти здесь.

Чтобы отобразить данные, извлеченные из коллекции Firestore и документированные в виджете ListTile, убедитесь, что вы:

• Понимаете структурирование базы данных Firebase.
• Выполнили все шаги в разделе «Настройка Firebase» для вашего проекта.
• Извлекли данные из коллекции или документа.
• Наконец, чтобы отобразить данные в виджете ListTile, выполните следующие шаги.

Пожалуйста, найдите инструкции по отображению/скрытию виджета здесь