Список в виде плитки со слайдером

SlidableListTile — это особый тип виджета ListTile, который раскрывает список действий, которые можно выполнить на ListTile, когда пользователь проводит пальцем вправо.

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

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

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

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

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

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

Открытие Slidable Action в редакторе позволяет настраивать виджет Slideable.

Чтобы открыть/закрыть действие Slidable Action в редакторе:

• Выберите ListTile в дереве виджетов или в области холста.
• Перейдите в редактор свойств и прокрутите вниз до раздела Свойства Slidable.
• Нажмите на кнопку Open Slidable, чтобы открыть действие в редакторе.
• Щелкните на кнопке Close Slidable, чтобы закрыть действие.

По умолчанию SlidableListTile добавляет один значок и текст, а цвет фона установлен на синий. Возможно, вы захотите изменить его, чтобы он соответствовал вашему дизайну.

Вот пример того, как можно изменить иконку, текст и цвет фона раздвигаемого действия:

• Сначала откройте раздвижное действие в редакторе.
• Выберите SlidableActionWidget (под ListTile) в дереве виджетов.
• Перейдите в редактор свойств и найдите раздел Свойства виджета Slidable Action.
• Измените свойство Text на Delete.
• Найдите ниже свойство Color и нажмите на поле рядом с Blue, выберите красный цвет, а затем нажмите Use Selected Color или нажмите на Blue и введите Hex-код напрямую. Вы также можете выбрать цвет, нажав на кнопку Палитра и просто.
• Чтобы изменить значок, найдите свойство Icon Selector, нажмите на кнопку с именем Share, затем найдите и выберите имя значка с удалением.

Чтобы добавить действие Slidable Action:

• Выберите ListTile в дереве виджетов или в области холста.
• Перейдите в редактор свойств и прокрутите вниз до раздела Свойства подвижного элемента.
• Нажмите на кнопку Добавить подвижное действие.

Чтобы удалить любой Slidable Action.

• Выберите SlidableActionWidget (под ListTile), который вы хотите удалить.
• Нажмите кнопку Delete на клавиатуре, и вкладка будет удалена из дерева виджетов. Вы также можете удалить вкладку, щелкнув правой кнопкой мыши в дереве виджетов и выбрав Cut.

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

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

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

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

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

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

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

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

Значок в конце (крайняя правая сторона) ListTile.

Вот пример того, как можно добавить значок в конце списка:

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

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

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

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

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

Инструкции по отображению/скрытию виджета находятся здесь