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

CheckboxListTile представляет собой комбинацию Checkbox и ListTile. При нажатии в любом месте CheckboxListTile переключается флажок.

Вы можете использовать плитку CheckboxListTile для отображения списка пунктов ToDo, чтобы отметить их как завершенные.

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

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

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

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

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

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

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

По умолчанию CheckboxListTile поставляется с установленным флажком. Однако вы можете изменить это поведение, чтобы изначально показывать флажок без флажка.

Чтобы установить значение флажка или снятия флажка:

• Выберите CheckboxListTile в дереве виджетов или в области холста.
• Перейдите в редактор свойств и прокрутите вниз до раздела Свойства плитки списка флажков.
• Установите/снимите флажок в свойстве Checkbox Initial Value (щелкните по нему).

По умолчанию CheckboxListTile поставляется с установленным флажком. Однако вы можете изменить это поведение, чтобы изначально показывать флажок без флажка.

Чтобы установить значение флажка или снятия флажка:

• Выберите CheckboxListTile в дереве виджетов или в области холста.
• Перейдите в редактор свойств и прокрутите вниз до раздела Свойства плитки списка флажков.
• Установите/снимите флажок в свойстве Checkbox Initial Value (щелкните по нему).

По умолчанию флажок имеет квадратную форму с синим фоном и белым цветом значка. Вы можете изменить этот параметр по умолчанию и настроить флажок с помощью свойств, доступных в разделе «Свойства плитки списка флажков».

Чтобы изменить цвет флажка:

• Выберите CheckboxListTile в дереве виджетов или в области холста.
• Перейдите в редактор свойств и прокрутите вниз до раздела Свойства плитки списка флажков.
• Найдите свойство Active Color и нажмите на поле рядом с Unset, выберите цвет, а затем нажмите Use Selected Color или нажмите на Unset и введите шестнадцатеричный код напрямую. Вы также можете выбрать цвет, нажав на кнопку Палитра и просто.
• Найдите свойство Check Color и установите флажок рядом с Unset, выберите цвет, а затем нажмите Use Selected Color или нажмите Unset и введите шестнадцатеричный код напрямую. Вы также можете выбрать цвет, нажав на кнопку Палитра и просто.

Чтобы сделать флажок круглым по форме:

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

Чтобы флажок появлялся перед заголовком:

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

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

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

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

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

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

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

Чтобы выполнить какое-либо действие при нажатии на CheckboxListTile, вы должны обернуть CheckboxListTile внутри виджета Container, а затем добавить Action в FlutterFlow.

Инструкции по добавлению действия вы можете найти здесь.

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

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

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