Простое в использовании колесо Flutter рекомендует настраиваемый компонент подсчета очков с шестнадцатью флаттерами.

Flutter
Простое в использовании колесо Flutter рекомендует настраиваемый компонент подсчета очков с шестнадцатью флаттерами.

предисловие

Flutter — это платформа мобильного пользовательского интерфейса Google для быстрого создания высококачественных нативных пользовательских интерфейсов на iOS и Android.

Знаменитый Николас Гольбао в ИТ-индустрии однажды сказал: Колесо — это лестница ИТ-прогресса! Популярные фреймворки такие же, простые в использовании колеса, чтобы выбрать один из тысячи! В качестве кроссплатформенной среды разработки, появившейся за последние два года, сторонняя экосистема Flutter немного меньше, чем другие зрелые среды, но количество колес уже велико. В этой серии статей выбираются и делятся колесами, которые обычно используются в повседневной разработке приложений, чтобы повысить эффективность перемещения кирпичиков для всех.В то же время я надеюсь, что экология флаттера будет становиться все более и более совершенной, и будет все больше и больше больше колес.

В этой серии статей подготовлено более 50 рекомендаций по колесам, причины работы, и постарайтесь публиковать статью каждые 1-2 дня.

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

текст

рулевое колесо

  • Рекомендуемый индекс: ★★★★
  • Общий индекс: ★★★
  • Предварительный просмотр эффекта:
    效果图

Установить

dependencies:
  flutter_rating_bar: ^3.0.0

import 'package:flutter_rating_bar/flutter_rating_bar.dart';

инструкции

По умолчанию:

RatingBar(
    initialRating: rate1, //初始评分 double
    allowHalfRating: true,//允许0.5评分
    itemCount: 5,//评分组件个数
    itemPadding: EdgeInsets.symmetric(horizontal: 4.0),
    itemBuilder: (context, _) => Icon(
        Icons.star,
        color: Colors.amber,
    ),
    onRatingUpdate: (rating) {
        setState(() {
            this.rate1=rating;
        });
    },
)

Пользовательский стиль оценивания:

RatingBar(
    initialRating: rate2,
    direction: Axis.horizontal,
    allowHalfRating: true,
    itemCount: 5,
    ratingWidget: RatingWidget(//自定义评分组件
        full: Image.asset('assets/heart.png',color: Colors.amber,),
        half: Image.asset('assets/heart_half.png',color: Colors.amber,),
        empty: Image.asset('assets/heart_border.png',color: Colors.amber,),
    ),
    itemPadding: EdgeInsets.symmetric(horizontal: 4.0),
    onRatingUpdate: (rating) {
        setState(() {
            this.rate2=rating;
        });
    },
),

Используйте индекс для управления стилями:

RatingBar(
    initialRating: rate3,
    itemCount: 5,
    itemBuilder: (context, index) {
    switch (index) {
        case 0:
            return Icon(
                Icons.sentiment_very_dissatisfied,
                color: Colors.red,
            );
        case 1:
            return Icon(
                Icons.sentiment_dissatisfied,
                color: Colors.redAccent,
            );
        case 2:
            return Icon(
                Icons.sentiment_neutral,
                color: Colors.amber,
            );
        case 3:
            return Icon(
                Icons.sentiment_satisfied,
                color: Colors.lightGreen,
            );
        case 4:
            return Icon(
                Icons.sentiment_very_satisfied,
                color: Colors.green,
            );
        }
    },
    onRatingUpdate: (rating) {
        setState(() {
            this.rate3=rating;
        });
    },
),

Вертикальное направление:

RatingBar(
    initialRating: rate4,
    direction: Axis.vertical,//竖方向
    allowHalfRating: true,
    itemCount: 5,
    itemPadding: EdgeInsets.symmetric(horizontal: 4.0),
    itemBuilder: (context, _) => Icon(
        Icons.star,
        color: Colors.amber,
    ),
    onRatingUpdate: (rating) {
        setState(() {
            this.rate4=rating;
        });
    },
),

конец

Категории