Flutter评分功能插件flutter_rating的使用

Flutter Rating 是一个高度可定制且易于使用的组件，用于在你的Flutter应用程序中实现评分系统。无论是为电影、餐厅或其他项目评分，这个组件都能提供你需要的灵活性。

快速入门

要开始使用Flutter Rating组件，你只需要指定初始评分。以下是最简单的包含评分组件的方法：

StarRating(rating: 3.5),

这段代码创建了一个初始评分为3.5星的评分组件。非常简单！

对于更高级的用法，请参考以下部分，并查看/example目录以获取全面的例子。

完整星级评分

如果你想仅使用完整的星星（没有半星），只需将allowHalfRating参数设置为false：

StarRating(
  rating: 4,
  allowHalfRating: false,
  onRatingChanged: (rating) => setState(() => this.rating = rating),
),

此配置限制用户只能选择完整的星级评分。

半星级评分

为了启用半星级评分，允许更细致的评分，请将allowHalfRating设置为true。这在需要详细反馈的情况下特别有用：

StarRating(
  rating: 3.5,
  allowHalfRating: true,
  onRatingChanged: (rating) => setState(() => this.rating = rating),
),

启用allowHalfRating后，用户可以通过点击或长按星星给出半星级评分。

自定义图标

你可以通过提供自己的IconData来定制填充、半填充和空心星星。以下是自定义每个星星图标的方法：

StarRating(
  rating: 3.5,
  filledIcon: Icons.favorite,
  halfFilledIcon: Icons.favorite_border,
  emptyIcon: Icons.favorite_outline,
  color: Colors.red, // 填充和半填充图标的颜色
  borderColor: Colors.grey, // 空心图标的颜色
  onRatingChanged: (rating) => setState(() => this.rating = rating),
),

此示例使用心形图标代替星星，展示了Flutter Rating组件的多功能性。

处理评分变化

要响应评分变化，请使用onRatingChanged回调。该回调提供了新的评分值，允许你更新UI或根据评分执行操作：

StarRating(
  rating: 3.5,
  onRatingChanged: (rating) => setState(() {
    this.rating = rating;
    // 根据新评分执行额外的操作
  }),
),

这种设置确保了你的应用能动态响应用户的评分调整。

完整示例Demo

以下是一个完整的示例代码，展示了如何在Flutter应用中使用flutter_rating插件：

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Test(),
    );
  }
}

class Test extends StatefulWidget {
  @override
  _TestState createState() => _TestState();
}

class _TestState extends State<Test> {
  double rating = 3.5;
  int starCount = 5;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Star Rating"),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Center(
            child: StarRating(
              size: 40.0,
              rating: rating,
              color: Colors.orange,
              borderColor: Colors.grey,
              allowHalfRating: true,
              starCount: starCount,
              onRatingChanged: (rating) => setState(() {
                this.rating = rating;
              }),
            ),
          ),
          SizedBox(height: 20),
          Text(
            "Your rating is: $rating",
            style: TextStyle(fontSize: 30.0),
          ),
        ],
      ),
    );
  }
}

以上就是关于Flutter评分功能插件flutter_rating的基本介绍与使用方法。希望对您有所帮助！