RatingBar

RatingBar показывает рейтинг — и, если включить интерактивный режим, собирает оценки от пользователей. Типичное применение: звёзды у товара в магазине.

Как добавить

Соберём карточку товара с оценкой:

1. Перетащите Column из вкладки Layout Elements или вставьте его в дерево виджетов и выставьте Cross Axis Alignment в Start.
2. Внутрь положите Image с Width = inf и Height = 200.
3. Добавьте Text: имя виджета — Item Name, Theme Style — Title 1, Left Padding — 10.
4. Добавьте второй Text: имя — Item Description, Theme Style — Subtitle 2, Left Padding — 10.
5. Наконец, добавьте RatingBar из вкладки Form Elements.

Сбор оценок

Чтобы пользователь мог поставить оценку:

1. Выделите RatingBar в дереве виджетов или на холсте.
2. Прокрутите панель свойств до раздела Rating Bar Properties.
3. Отметьте свойство Interactive.

Значение рейтинга

Рейтинг задаётся числом или берётся из переменной. Это имеет смысл только для неинтерактивного виджета — интерактивный хранит то, что выбрал пользователь.

1. Выделите RatingBar.
2. Прокрутите панель свойств до Rating Bar Properties.
3. Измените значение свойства Rating.

Свои значки

Звёзды заменяются на что угодно:

1. Выделите RatingBar.
2. Прокрутите панель свойств до Rating Bar Properties.
3. Задайте Icon Count — например, 10.
4. Задайте Icon Size — 30.
5. В свойстве Icon Selector нажмите кнопку Start Rounded, найдите и выберите значок FontAwesome.smile.

Цвета закрашенных и пустых значков

1. Выделите RatingBar.
2. Прокрутите панель свойств до Rating Bar Properties.
3. В свойстве Rated Color щёлкните по квадрату рядом с Secondary, выберите цвет и нажмите Use Selected Color — либо щёлкните по Secondary и введите hex-код. Цвет можно подобрать кнопками Palette и Simple.
4. Так же задайте Unrated Color — цвет незакрашенных значков.

Отступы между значками

1. Выделите RatingBar.
2. Прокрутите панель свойств до Rating Bar Properties.
3. Заполните Icon Padding.

Вертикальное расположение

Редко, но бывает нужно поставить значки в столбец. За это отвечает свойство Axis.

1. Выделите RatingBar.
2. Прокрутите панель свойств до Rating Bar Properties.
3. В списке Axis выберите Vertical.