Flutter可拖动评分条插件flutter_pannable_rating_bar的使用

Flutter可拖动评分条插件flutter_pannable_rating_bar的使用

引入一个适用于Flutter的新版评分条，提供了更高的灵活性和完全自定义的功能。与其它评分条不同的是，此评分条支持任何值的选择，而不仅仅是全星或半星的评分。点击、拖动和悬停手势均被无缝支持，以提供流畅的用户体验。

特性

• 支持分数值的评分。
• 高度定制化，可以调整评分小部件的大小、形状和颜色。
• 精确的命中测试，利用子部件的渲染对象来确定结果。
• 允许通过tapOnly、dragOnly或tapAndDrag选项过滤手势。
• 支持鼠标悬停时的评分报告。
• 基于Flutter内置的Wrap小部件构建，支持多种布局方式，并考虑了Wrap属性如textDirection和verticalDirection。

开始使用

首先导入该库：

import 'package:flutter_pannable_rating_bar/flutter_pannable_rating_bar.dart';

使用方法

该小部件是无状态的，且非常灵活，可以轻松地操纵值并自定义PannableRatingBar的显示。只需将提供的值通过onChanged回调或onHover回调传递给小部件，它就会自动调整每个评分小部件上的评分分布。

double rating = 0.0;

PannableRatingBar(
  rate: rating,
  items: List.generate(5, (index) =>
    const RatingWidget(
      selectedColor: Colors.yellow,
      unSelectedColor: Colors.grey,
      child: Icon(
        Icons.star,
        size: 48,
      ),
    )),
  onChanged: (value) { // 点击或拖动时更新评分值。
    setState(() {
      rating = value;
    });
  },
)

该小部件还支持通过onHover回调在悬停时获取评分值。这在支持鼠标光标的设备上（包括桌面浏览器）效果最佳。

double rating = 0.0;

PannableRatingBar(
  rate: rating,
  items: List.generate(5, (index) =>
    const RatingWidget(
      selectedColor: Colors.yellow,
      unSelectedColor: Colors.grey,
      child: Icon(
        Icons.star,
        size: 48,
      ),
    )),
  onHover: (value) { // 悬停时更新评分值。
    setState(() {
      rating = value;
    });
  },
)

可以使用自定义的小部件作为评分指示器。具有完全的定制自由度，这些小部件不必在大小、颜色或其他方面保持一致。

double rating = 0.0;

PannableRatingBar(
  rate: rating,
  onChanged: (value) {
    setState(() {
      rating = value;
    });
  },
  items: const [
    RatingWidget(
      selectedColor: Colors.yellow,
      unSelectedColor: Colors.grey,
      child: Icon(
        Icons.star,
        size: 48,
      ),
    ),
    RatingWidget(
      selectedColor: Colors.blue,
      unSelectedColor: Colors.red,
      child: Icon(
        Icons.ac_unit,
        size: 48,
      ),
    ),
    RatingWidget(
      selectedColor: Colors.purple,
      unSelectedColor: Colors.amber,
      child: Icon(
        Icons.access_time_filled,
        size: 48,
      ),
    ),
    RatingWidget(
      selectedColor: Colors.cyanAccent,
      unSelectedColor: Colors.grey,
      child: Icon(
        Icons.abc,
        size: 48,
      ),
    ),
    RatingWidget(
      selectedColor: Colors.tealAccent,
      unSelectedColor: Colors.purple,
      child: Icon(
        Icons.accessibility_new_sharp,
        size: 48,
      ),
    ),
  ],
)

double rating = 0;
PannableRatingBar(
  rate: rating,
  onChanged: (value){
    setState((){
      rating = value;
    });
  },
  spacing: 20,
  items: const [
    RatingWidget(
      selectedColor: Colors.blue,
      child: Text(
        "Pannable",
        style: TextStyle(color: Colors.grey, fontSize: 40),
      ),
    ),
    RatingWidget(
      selectedColor: Colors.red,
      child: Text(
        "Rating",
        style: TextStyle(color: Colors.grey, fontSize: 30),
      ),
    ),
    RatingWidget(
      selectedColor: Colors.amber,
      child: Text(
        "Bar",
        style: TextStyle(color: Colors.grey, fontSize: 50),
      ),
    ),
  ],
),

该小部件利用了Flutter内置Wrap小部件的布局能力，允许实现多种可能的布局。当绘制指示器时，会考虑Wrap小部件的属性，例如textDirection和verticalDirection，从而为您提供更大的控制权，以达到最终的外观和感觉。

double rating = 0.0;

PannableRatingBar.builder(
  rate: rating,
  alignment: WrapAlignment.center,
  spacing: 20,
  runSpacing: 10,
  itemCount: 20,
  direction: Axis.vertical,
  itemBuilder: (context, index) {
    return const RatingWidget(
      selectedColor: Colors.yellow,
      unSelectedColor: Colors.grey,
      child: Icon(
        Icons.star,
        size: 48,
      ),
    );
  },
  onChanged: (value) {
    setState(() {
      rating = value;
    });
  },
)

根据其值自定义评分指示器的外观。

double rating = 0;

PannableRatingBar(
    rate: rating,
    spacing: 20,
    onChanged: (value){
      setState((){
        rating = value;
      });
    },
    items: [
      RatingWidget(
        selectedColor: rating <= 0.5 ? Colors.red : Colors.green,
        unSelectedColor: Colors.grey,
        child: AnimatedSwitcher(
          duration: const Duration(milliseconds: 300),
          child: rating <= 0.5
              ? const Icon(
                  Icons.sentiment_very_dissatisfied,
                  key: ValueKey("sad"),
                  size: 100,
                )
              : const Icon(
                  Icons.sentiment_satisfied,
                  key: ValueKey("happy"),
                  size: 100,
                ),
        ),
      ),
    ],
),

为了方便转换/修改评分值，库支持使用函数进行此类操作，作为PannableRatingBar的一个参数。

返回null将导致当前评分值在所有回调中被跳过。

typedef RatingValueTransformer = double? Function(double value);

一些预建的RatingValueTransformer包括：

// 四舍五入到最近的单个分数位。这也是`PannableRatingBar`使用的默认设置。
double singleFractionalValueTransformer(double value);

// 四舍五入到最近的.5。
double halfFractionalValueTransformer(double value);

// 保留原始评分值。
double rawValueTransformer(double value);