pub package

又一个 Flutter 评分条。但这次支持任何值，不仅仅是整数或半整数，而且是完全可定制的。点击和拖动等手势都得到了支持。

特点

  • 支持任何分数
  • 利用 Flutter 的 Wrap 小部件，这意味着你可以实现 Wrap 支持的任何布局。
  • 可定制的评分小部件，可定制的程度非常高，每个小部件不必具有相同的大小，甚至不必使用相同的指示器颜色。
  • 命中测试正确，每个子小部件的渲染对象都用于命中测试，因此命中测试结果尽可能准确。

入门

首先导入小部件

import 'package:flutter_pannable_rating_bar/flutter_pannable_rating_bar.dart';

用法

小部件本身是完全无状态的，这意味着你可以操作回调提供的任何值，并将其用作 PannableRatingBar 的值。

只需使用 onChanged 回调中提供的值调用 setState，它就会被正确地分配给每个评分小部件。

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(),
    body: Center(
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 16.0),
        child: PannableRatingBar(
          rate: value,
          alignment: WrapAlignment.center,
          spacing: 20,
          items: List.generate(
              5,
                  (index) =>
              const RatingWidget(
                selectedColor: Colors.yellow,
                unSelectedColor: Colors.grey,
                child: Icon(
                  Icons.star,
                  size: 48,
                ),
              )),
          runAlignment: WrapAlignment.center,
          onChanged: (value) {
            setState(() {
              this.value = value;
            });
          },
        ),
      ),
    ),
  );
}

使用您自己的小部件作为评分小部件。它们不必具有相同的大小、颜色或其他任何东西，完全可定制。

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(),
    body: Center(
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 16.0),
        child: PannableRatingBar(
          rate: value,
          alignment: WrapAlignment.center,
          spacing: 20,
          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,
              ),
            ),
          ],
          runAlignment: WrapAlignment.center,
          onChanged: (value) {
            setState(() {
              this.value = value;
            });
          },
        ),
      ),
    ),
  );
}

布局算法是 Flutter 内置的 Wrap 小部件，因此任何可以用 Wrap 实现的布局都可以用此小部件实现。

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(),
    body: Center(
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: PannableRatingBar.builder(
          rate: value,
          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(() {
              this.value = value;
            });
          },
        ),
      ),
    ),
  );
}

附加信息

有任何改进想法吗？请在仓库中提出一个 issue！

GitHub

查看 Github