Перейти к основному содержимому

RatingBar

Виджет RatingBar используется для отображения рейтинга или сбора оценок от пользователей (это интерактивный RatingBar). Например, вы можете использовать виджет RatingBar в приложении для электронной коммерции, чтобы показать рейтинги для продукта.

Добавление RatingBar в проект​

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

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

Сбор оценок от пользователей (интерактивный RatingBar)​

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

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

Установка значения рейтинга​

Рейтинг можно установить, введя значение, или задать из переменной. Это относится только к неинтерактивному RatingBar.

Чтобы вручную установить значение рейтинга для RatingBar:

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

Вы также можете ввести значение в десятичном формате, например 1.5. При использовании десятичного значения часть иконки будет окрашена.

Настройка иконки​

Вот пример того, как вы можете настроить иконки, отображаемые в RatingBar:

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

Изменение цвета оцененного/неоцененного состояния​

Чтобы изменить цвет оцененного и неоцененного состояния (цвет для незаполненных иконок) в RatingBar:

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

Добавление отступа между иконками​

Чтобы добавить отступ между иконками:

  1. Выберите RatingBar из дерева виджетов или с области холста.
  2. Перейдите в редактор свойств и прокрутите вниз до раздела Rating Bar Properties.
  3. Найдите свойство Icon Padding и введите значения.
к сведению

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

Изменение оси​

В редких случаях вы можете захотеть расположить все иконки (внутри RatingBar) вертикально. Это можно сделать с помощью свойства Axis.

Чтобы изменить ось:

  1. Выберите RatingBar из дерева виджетов или с области холста.
  2. Перейдите в редактор свойств и прокрутите вниз до раздела Rating Bar Properties.
  3. Найдите раскрывающийся список Axis и измените его на Vertical.