Flutter评分插件custom_rating_bar的使用

custom_rating_bar 是一个Flutter插件，用于创建自定义评分条。它支持自定义图标、半星显示、方向和对齐等特性。

快速开始

使用方法

首先，在你的pubspec.yaml文件中添加依赖：

dependencies:
  custom_rating_bar: ^latest_version # 替换为最新版本号

然后运行 flutter pub get 来安装这个包。

接下来在你的Dart代码中导入此库：

import 'package:custom_rating_bar/custom_rating_bar.dart';

基础用法

这是一个简单的评分条的例子：

RatingBar(
  filledIcon: Icons.star, // 已选中的星星图标
  emptyIcon: Icons.star_border, // 未选中的星星图标
  onRatingChanged: (value) => debugPrint('$value'), // 当用户改变评分时触发
  initialRating: 3, // 初始评分值
  maxRating: 5, // 最大评分值
)

如果你想要一个只读的评分条（例如用来展示），可以这样使用：

RatingBar.readOnly(
  filledIcon: Icons.star, 
  emptyIcon: Icons.star_border,
  initialRating: 4,
  maxRating: 5,
)

示例代码

以下是一个完整的示例应用，展示了如何配置不同的选项来创建多样化的评分条：

import 'package:custom_rating_bar/custom_rating_bar.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(_MyApp());
}

class _MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Custom Rating Bar Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const ExamplePage(),
    );
  }
}

class ExamplePage extends StatelessWidget {
  const ExamplePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: ListView(
        padding: const EdgeInsets.all(16).copyWith(top: MediaQuery.of(context).padding.top + 16),
        children: [
          _buildDivider('Half icons'),
          RatingBar(
            filledIcon: Icons.star,
            emptyIcon: Icons.star_border,
            onRatingChanged: (value) => debugPrint('$value'),
            initialRating: 3,
            alignment: Alignment.center,
          ),
          const SizedBox(height: 16),
          _buildDivider('Custom colors'),
          const RatingBar.readOnly(
            isHalfAllowed: true,
            alignment: Alignment.center,
            filledIcon: Icons.star,
            emptyIcon: Icons.star_border,
            emptyColor: Colors.redAccent,
            filledColor: Colors.greenAccent,
            halfFilledColor: Colors.amberAccent,
            halfFilledIcon: Icons.star_half,
            initialRating: 3.5,
            maxRating: 7,
          ),
          const SizedBox(height: 16),
          _buildDivider('Custom icons'),
          const RatingBar.readOnly(
            isHalfAllowed: true,
            alignment: Alignment.center,
            filledIcon: Icons.wb_sunny,
            halfFilledIcon: Icons.wb_cloudy,
            emptyIcon: Icons.ac_unit,
            emptyColor: Colors.blue,
            halfFilledColor: Colors.grey,
            initialRating: 4,
          ),
          const SizedBox(height: 16),
          _buildDivider('Vertical'),
          const RatingBar.readOnly(
            direction: Axis.vertical,
            isHalfAllowed: true,
            alignment: Alignment.center,
            filledIcon: Icons.star,
            emptyIcon: Icons.star_border,
            initialRating: 2,
            maxRating: 3,
            halfFilledIcon: Icons.star_half,
          ),
          const SizedBox(height: 16),
          _buildDivider('Aligned left'),
          const RatingBar.readOnly(
            isHalfAllowed: true,
            filledIcon: Icons.face,
            filledColor: Colors.greenAccent,
            halfFilledColor: Colors.amberAccent,
            emptyIcon: Icons.face,
            initialRating: 3.5,
            halfFilledIcon: Icons.face,
          ),
          const SizedBox(height: 16),
          _buildDivider('Aligned right'),
          const RatingBar.readOnly(
            isHalfAllowed: true,
            alignment: Alignment.centerRight,
            filledIcon: Icons.star,
            emptyIcon: Icons.star_border,
            filledColor: Colors.greenAccent,
            halfFilledColor: Colors.greenAccent,
            initialRating: 3.5,
            halfFilledIcon: Icons.star_half,
          ),
        ],
      ),
    );
  }

  Widget _buildDivider(String text) => Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Flexible(
            child: Divider(
              color: Colors.grey[400],
              height: 48,
              thickness: 1,
            ),
          ),
          const SizedBox(width: 8),
          Text(
            text,
            style: TextStyle(
              color: Colors.grey[500],
              fontSize: 20,
              fontWeight: FontWeight.w300,
            ),
          ),
          const SizedBox(width: 8),
          Flexible(
            child: Divider(
              color: Colors.grey[350],
              height: 32,
              thickness: 1,
            ),
          ),
        ],
      );
}

以上代码展示了如何使用custom_rating_bar创建不同风格的评分条，包括半星、自定义颜色、自定义图标、垂直排列以及不同的对齐方式。你可以根据自己的需求调整这些属性以适应应用程序的设计。