Контент пользователя может быть оценен с помощью панели рейтинга, как следует из названия. Они в основном используются каждым приложением либо для блокировки комментариев пользователей к своему программному обеспечению, либо для получения рейтингов контента, размещенного в приложении. Такие приложения, как IMDB, используют их для оценки фильмов и телешоу, а Uber использует их для получения информации от клиентов о своих услугах.
RatingBar — это расширение SeekBar и ProgressBar, которое отображает звездный рейтинг.
Ниже представлен конструктор RatingBar.
РейтингБар(
{требуется RatingWidget ratingWidget,
требуется ValueChanged‹double› onRatingUpdate,
Цвет? свечениеЦвет,
двойной? максимальный рейтинг,
Направление текста? текстовое направление,
Цвет? без рейтингаЦвет,
bool allowHalfRating = false,
Направление оси = Axis.horizontal,
логическое свечение = true,
двойное свечениеРадиус = 2,
bool ignoreGestures = false,
двойной начальный рейтинг = 0,0,
число предметов = 5,
EdgeInsetsGeometry itemPadding = EdgeInsets.zero,
двойной размер элемента = 40.0,
двойной минрейтинг = 0,
bool tapOnlyMode = false,
bool updateOnDrag = false,
WrapAlignment wrapAlignment = WrapAlignment.start}
)
Давайте посмотрим на свойства виджета RatingBar.
Виджет Рейтинга:
Определяет виджеты, которые будут использоваться в качестве элементов в строке рейтинга.
onRatingUpdate :
Сигнатуры обратного вызова, которые сигнализируют об изменении базового значения.
свечениеЦвет:
Он определяет цвет свечения.
максимальный рейтинг :
Установите максимальный рейтинг для панели рейтинга.
направление текста:
Используется для установки перемещения текста справа налево.
без рейтингаЦвет :
Используется для компонента без рейтинга, определяет цвета.
разрешитьHalfRating :
Поддержка половины рейтинга включается установкой true.
направление :
Используется для указания направления шкалы рейтинга (горизонтальное или вертикальное).
светиться :
Элемент Rating Bar будет светиться при касании, если значение истинно.
свечениеРадиус:
Это свойство используется для определения радиуса свечения.
игнорироватьЖесты:
Если установлено значение true, никакие жесты над панелью рейтинга запрещены.
начальный рейтинг:
Определяет первоначальный рейтинг, который будет установлен на шкале рейтинга.
количество предметов :
Определяется общее количество элементов панели рейтинга.
itemPadding :
Он определяет количество места для вставки каждого элемента рейтинга.
пунктРазмер :
Определяет размеры каждого элемента рейтинга на панели.
минРейтинг :
Установленный минимальный рейтинг для рейтинговой панели.
TapOnlyMode:
Если установлено значение true, функция перетаскивания для оценки будет отключена. Возможность половинного рейтинга будет отключена, если этот режим включен.
обновление при перетаскивании:
определяет, обновляется ли onRatingUpdate при перетаскивании.
Также проверьте: Как настроить эмулятор для VSCode?
оберткаВыравнивание:
Он используется для позиционирования элемента RatingBar на главной оси.
Выполните следующие действия для разработки приложения RattingBar:
- Включите зависимость в файл pubspec.yaml.
flutter_rating_bar - Добавьте зависимости в main.dart.
- Используйте StatefulWidget, чтобы задать структуру приложения.
- Поставьте там вертикальную планку рейтинга.
- Добавьте переключатель для переключения выравнивания полос рейтинга справа налево (RTL).
- Включите переключатель, чтобы переключить выравнивание полосы рейтинга с горизонтального на вертикальное.
- Включите 3 режима, которые изменяют значки пользовательского интерфейса.
Пример :
импортировать ‘package:flutter/material.dart’;
импортировать ‘package:flutter_rating_bar/flutter_rating_bar.dart’;
void main() => runApp(const MyApp());
класс MyApp расширяет StatefulWidget {
const MyApp({Ключ? Ключ}): super(Ключ: Ключ);
@переопределить
_MyAppState createState() => _MyAppState();
}
класс _MyAppState расширяет состояние‹MyApp› {
двойной? _рейтинг;
ИконДата? _выбранный значок;
@переопределить
Сборка виджета (контекст BuildContext) {
возврат MaterialApp(
debugShowCheckedModeBanner: false,
тема: ThemeData(
первичный образец: Colors.green,
),
дом: Строитель(
builder: (контекст) => Scaffold(
панель приложения: панель приложения (
title: const Text('Панель рейтинга'),
backgroundColor: Colors.green,
),
тело: Центр(
ребенок: Контейнер(
заполнение: const EdgeInsets.симметричный (по вертикали: 20),
дочерний элемент: RatingBar.builder(
начальный рейтинг: _рейтинг ?? 0.0,
минРейтинг: 1,
направление: Axis.horizontal,
allowHalfRating: false,
количество предметов: 5,
размер изделия: 50,
itemPadding: const EdgeInsets.symbol (по горизонтали: 8),
itemBuilder: (контекст, _) => Иконка(
_выбранный значок ?? Иконы.звезда,
цвет: Colors.янтарный,
),
onRatingUpdate: (рейтинг) {
_рейтинг = рейтинг;
установить состояние (() {});
},
),
),
),
),
),
);
}
}
Выход:
Заключение:
Это была действительно простая иллюстрация. мы умоляем вас расширить возможности настройки виджета, чтобы вы могли изменить цвет фона звезд и присвоить ему рейтинг в ползвезды. Надеюсь, вам понравилось читать эту статью.
Если вы хотите разработать свое кросс-платформенное приложение с помощью Flutter, проконсультируйтесь с опытными разработчиками Flutter, которые предоставят вам лучшее приложение, которое будет работать без сбоев. .
Часто задаваемые вопросы (FAQ)
1. Как использовать панель рейтинга во Flutter?
Сначала перетащите виджет столбца с вкладки элементов макета или включите его прямо из дерева виджетов. После этого установите выравнивание поперечной оси, чтобы начать. Значок и свойство высоты до 200. Позже внутри столбца, включая текстовый виджет.
2. Что такое индикатор выполнения во Flutter?
Индикатор выполнения — это графический элемент управления, который используется для просмотра хода выполнения задачи, такой как загрузка, установка, передача файлов и т. д. Прочтите подробную статью о индикаторе выполнения здесь.
3. Определите виджет Stateful во Flutter
Виджет с состоянием будет описывать часть пользовательского интерфейса, развивая созвездие другого виджета и выражая пользовательский интерфейс более конкретно.
