Flutter星级评分插件smooth_star_rating_nsafe的使用

Flutter星级评分插件smooth_star_rating_nsafe的使用

一个带有触摸和滑动评分功能的星级评分控件。

  • 支持替换默认的星形图标为所需的IconData
  • 支持半星评分和整星评分（1.0 或 0.5）
  • 滑动以增加或减少评分数量
  • 可独立设置星体颜色和边框颜色
  • 控制星级大小
  • 设置所需的总星数
  • 支持点击评分
  • 星星之间的间距

开始使用

在你的Flutter项目中添加依赖：

dependencies:
    ...
    smooth_star_rating_nsafe: 1.0.0+1

使用示例

首先，导入插件：

import 'smooth_star_rating_nsafe/smooth_star_rating.dart';

然后，在你的代码中使用该插件：

SmoothStarRating(
  allowHalfRating: false, // 是否允许半星评分
  onRatingChanged: (v) { // 评分改变时的回调函数
    rating = v;
    setState(() {}); // 更新UI
  },
  starCount: 5, // 星星的数量
  rating: rating, // 当前的评分值
  size: 40.0, // 星星的大小
  filledIconData: Icons.blur_off, // 完整评分的图标
  halfFilledIconData: Icons.blur_on, // 半星评分的图标
  color: Colors.green, // 星星的颜色
  borderColor: Colors.green, // 星星边框的颜色
  spacing: 0.0, // 星星之间的间距
)

构造函数参数

  • allowHalfRating: 是否使用整数评分（1.0 或 0.5）
  • onRatingChanged(int rating): 评分改变时的回调函数
  • starCount: 最大星星数量
  • rating: 当前的评分值
  • size: 单个星星的大小
  • color: 星星主体的颜色
  • borderColor: 星星边框的颜色
  • spacing: 星星之间的间距（默认为0.0）
  • filledIconData: 完整评分的图标
  • halfFilledIconData: 半星评分的图标
  • defaultIconData: 默认评分的图标

截图

完整评分

半星评分

MIT 许可证

如果你发现任何问题或bug，请告诉我。谢谢！

完整示例代码

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

import 'package:flutter/material.dart';
import 'package:smooth_star_rating_nsafe/smooth_star_rating.dart';

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

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  var rating = 0.0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Rating bar demo',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
            child: SmoothStarRating(
          rating: rating,
          size: 65,
          filledIconData: Icons.star,
          halfFilledIconData: Icons.star_half,
          defaultIconData: Icons.star_border,
          starCount: 5,
          allowHalfRating: false,
          spacing: 2.0,
          onRatingChanged: (value) {
            setState(() {
              rating = value;
            });
          },
        )),
      ),
    );
  }
}

更多关于Flutter星级评分插件smooth_star_rating_nsafe的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter星级评分插件smooth_star_rating_nsafe的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


smooth_star_rating_nsafe 是一个 Flutter 插件，用于在应用中实现星级评分功能。它允许用户通过点击星星来评分，并且支持自定义星星的数量、大小、颜色等。

安装插件

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

dependencies:
  flutter:
    sdk: flutter
  smooth_star_rating_nsafe: ^1.0.0+1

然后运行 flutter pub get 来安装依赖。

基本用法

以下是一个简单的示例，展示如何使用 smooth_star_rating_nsafe 插件：

import 'package:flutter/material.dart';
import 'package:smooth_star_rating_nsafe/smooth_star_rating.dart';

class StarRatingExample extends StatefulWidget {
  [@override](/user/override)
  _StarRatingExampleState createState() => _StarRatingExampleState();
}

class _StarRatingExampleState extends State<StarRatingExample> {
  double rating = 0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Star Rating Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            SmoothStarRating(
              rating: rating,
              size: 40,
              filledIconData: Icons.star,
              halfFilledIconData: Icons.star_half,
              defaultIconData: Icons.star_border,
              starCount: 5,
              allowHalfRating: true,
              color: Colors.yellow,
              borderColor: Colors.yellow,
              spacing: 2.0,
              onRatingChanged: (newRating) {
                setState(() {
                  rating = newRating;
                });
              },
            ),
            SizedBox(height: 20),
            Text(
              'Rating: $rating',
              style: TextStyle(fontSize: 20),
            ),
          ],
        ),
      ),
    );
  }
}

void main() => runApp(MaterialApp(
  home: StarRatingExample(),
));
回到顶部