Expanded

Виджет Expandable расширяется или сворачивается, чтобы показать или скрыть детали элемента. Он состоит из заголовка, свернутого вида, развернутого вида. Виджет Expandable обычно используется для заполнения ListView, чтобы создать запись элемента «развернуть/свернуть».

Например, вы можете использовать Expandable для отображения списка глав книг или списка отелей, который сначала показывает минимум деталей, а при раскрытии показывает больше информации.

Вот пример того, как вы можете использовать виджет Expandable в своем проекте:
Сначала перетащите виджет ListView с вкладки Layout Elements (в панели виджетов) или добавьте его непосредственно из дерева виджетов.

• Перетащите виджет Expandable с вкладки Layout Elements и бросьте его внутрь ListView.
• Если вы видите, что виджет Container обернут вокруг виджета Expandable, выберите его и удалите его высоту.
• В разделе Заголовок выберите виджет Текст и установите его текст на Глава 1.
• В разделе Свернутый вид -> Контейнер выберите виджет Текст и установите его текст на 2 Раздел.
• Под Расширенным видом -> Колонка выберите виджет Текст и измените его текст на Раздел 1.
• Под Расширенным видом -> Колонка добавьте еще несколько текстовых виджетов.
• В разделе Expanded View -> Column перенесите изображение на самый верх и сделайте его первым дочерним элементом колонки.

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

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

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

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

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

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

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

Изменение вида Развернутый/Свернутый помогает редактировать/проектировать каждый тип вида в редакторе.

Чтобы переключить вид Развернутый/Свернутый в редакторе:

• Выберите Expandable в дереве виджетов или в области холста.
• Перейдите в редактор свойств (в правой части экрана) и прокрутите вниз до раздела Свойства Expandable.
• Найдите свойство Active View, измените его на Collapsed или Expanded.

Иногда вы можете захотеть показать элемент в развернутом виде до начала взаимодействия с пользователем. Это может помочь пользователям узнать о взаимодействии развертывания и свертывания. Это можно сделать с помощью свойства Initially Expanded.

Чтобы элемент изначально отображался в развернутом виде:

• Выберите любой Expandable из дерева виджетов или из области холста.
• Перейдите в редактор свойств и прокрутите вниз до раздела Свойства взаимодействия.
• Отметьте свойство Initially Expanded. (Нажмите на него)

Иногда вы можете захотеть разрешить пользователям переключать вид развернуть/свернуть только при нажатии на значок стрелки.

Чтобы отключить нажатие на заголовок:

• Выберите любой Expandable из дерева виджетов или из области холста.
• Перейдите в редактор свойств и прокрутите вниз до раздела Свойства взаимодействия.
• Снимите флажок Tap Header to Toggle. (Нажмите на него).

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

Чтобы показать расширенный вид при нажатии на тело:

• Выберите любой Expandable в дереве виджетов или в области холста.
• Перейдите в редактор свойств и прокрутите вниз до раздела Свойства взаимодействия.
• Отметьте пункт Tap Body to Expand. (Нажмите на него).

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

Чтобы показать свернутый вид при нажатии на тело:

• Выберите любой Expandable в дереве виджетов или в области холста.
• Перейдите в редактор свойств и прокрутите вниз до раздела Свойства взаимодействия.
• Отметьте пункт Tap Body to Collapse. (Нажмите на него).

Чтобы изменить цвет фона заголовка Expandable, выполните следующие действия:

• Выберите любой Expandable в дереве виджетов или в области холста.
• Перейдите в редактор свойств и прокрутите вниз до раздела Свойства стиля.
• Найдите свойство Цвет фона, нажмите на поле рядом с опцией Сбросить, выберите цвет, а затем нажмите кнопку Использовать выбранный цвет или нажмите кнопку Сбросить и введите шестнадцатеричный код напрямую. Вы также можете выбрать цвет, нажав на кнопку Палитра и просто.

Чтобы выровнять текст заголовка по вертикали:

• Выберите любой Expandable в дереве виджетов или в области холста.
• Перейдите в редактор свойств и прокрутите вниз до раздела Свойства стиля.
• Найдите выпадающий список «Выравнивание заголовка» и выберите один из вариантов: «Сверху», «По центру», «Снизу».

Чтобы изменить размер расширяемого виджета:

• Выберите любой Expandable в дереве виджетов или в области холста.
• Перейдите в редактор свойств и прокрутите вниз до раздела Свойства стиля.
• Найдите свойство Ширина и Высота.
• Существует три способа задать размеры:
  • Чтобы задать точный размер, выберите PX и введите нужные значения.
  • Чтобы задать размеры в % от размера экрана, выберите % и введите нужное значение.
  • Чтобы сделать высоту или ширину Expandable равной высоте или ширине экрана, просто нажмите на значок бесконечности ().

В очень редких случаях вы можете захотеть скрыть значок стрелки (который используется для управления поведением расширения/свертывания).

Чтобы скрыть значок стрелки:

• Выберите любой Expandable в дереве виджетов или в области холста.
• Перейдите в редактор свойств и прокрутите вниз до раздела «Свойства значка».
• Снимите флажок со свойства «Имеет значок». (Нажмите на него).

Значок свернутого вида — это значок, который отображается, когда свернутый вид виден.

Чтобы изменить значок свернутого вида:

• Выберите любой Expandable в дереве виджетов или в области холста.
• Перейдите в Редактор свойств и прокрутите вниз до раздела Свойства значка.
• Найдите свойство Collapsed Icon, нажмите на кнопку None, затем найдите и выберите имя значка из всплывающего окна выбора изображений.
• Чтобы вернуться к значку по умолчанию, нажмите на значок отмены ().

Расширенная иконка — это иконка, которая отображается, когда виден расширенный вид.

Чтобы изменить значок расширения, выполните следующие действия:

• Выберите любой Expandable в дереве виджетов или в области холста.
• Перейдите в редактор свойств и прокрутите вниз до раздела Свойства значка.
• Найдите свойство Expanded Icon, нажмите на кнопку None, затем найдите и выберите имя значка из всплывающего окна выбора изображения.
• Чтобы вернуться к значку по умолчанию, нажмите на значок отмены ().

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

Чтобы добавить немного пространства вокруг значка:

• Выберите любой Expandable в дереве виджетов или в области холста.
• Перейдите в редактор свойств и прокрутите вниз до раздела «Свойства значка».
• Найдите свойство Icon Padding и введите нужное значение.
• Нажмите на значок Refresh, чтобы сбросить значения.

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

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

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

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