Flutter星级评分插件simple_star_rating的使用

Flutter星级评分插件simple_star_rating的使用

简介

simple_star_rating 是一个简单的 Flutter 包,支持用户通过点击或水平拖动来进行评分。

示例

以下是如何使用 simple_star_rating 插件的示例代码:

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('星级评分插件simple_star_rating的使用'),
        ),
        body: Center(
          child: SimpleStarRating(
            // 允许半星评分
            allowHalfRating: true,
            // 星星的数量
            starCount: 5,
            // 当前评分
            rating: 3,
            // 星星的大小
            size: 32,
            // 是否允许用户编辑评分
            allowEditing: true,
            // 用户评分后触发的回调函数
            onRated: (rate) {
              print("当前评分为: $rate");
            },
            // 星星之间的间距
            spacing: 10,
          ),
        ),
      ),
    );
  }
}

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

1 回复

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


当然,以下是如何在Flutter项目中使用simple_star_rating插件来实现星级评分功能的代码案例。

首先,确保你的Flutter项目已经创建,并且在pubspec.yaml文件中添加了simple_star_rating依赖:

dependencies:
  flutter:
    sdk: flutter
  simple_star_rating: ^x.y.z  # 请将x.y.z替换为最新版本号

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

接下来,你可以在你的Dart文件中使用SimpleStarRating组件。以下是一个完整的示例代码:

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

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

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

class StarRatingScreen extends StatefulWidget {
  @override
  _StarRatingScreenState createState() => _StarRatingScreenState();
}

class _StarRatingScreenState extends State<StarRatingScreen> {
  double _rating = 0.0;

  void _onRatingChanged(double rating) {
    setState(() {
      _rating = rating;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Star Rating Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Your Rating: $_rating',
              style: TextStyle(fontSize: 24),
            ),
            SizedBox(height: 20),
            SimpleStarRating(
              rating: _rating,
              starCount: 5,
              starSize: 30.0,
              color: Colors.amber,
              borderColor: Colors.grey,
              spacing: 5.0,
              allowHalfRating: true,
              onRatingChanged: _onRatingChanged,
            ),
          ],
        ),
      ),
    );
  }
}

代码解释:

  1. 依赖导入

    import 'package:simple_star_rating/simple_star_rating.dart';
    
  2. 主应用

    void main() {
      runApp(MyApp());
    }
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter Star Rating Demo',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: StarRatingScreen(),
        );
      }
    }
    
  3. 星级评分屏幕

    • 创建了一个StatefulWidget来管理星级评分状态。
    • 使用SimpleStarRating组件来显示星级评分,并处理评分变化。
    class StarRatingScreen extends StatefulWidget {
      @override
      _StarRatingScreenState createState() => _StarRatingScreenState();
    }
    
    class _StarRatingScreenState extends State<StarRatingScreen> {
      double _rating = 0.0;
    
      void _onRatingChanged(double rating) {
        setState(() {
          _rating = rating;
        });
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text('Star Rating Demo'),
          ),
          body: Padding(
            padding: const EdgeInsets.all(16.0),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text(
                  'Your Rating: $_rating',
                  style: TextStyle(fontSize: 24),
                ),
                SizedBox(height: 20),
                SimpleStarRating(
                  rating: _rating,
                  starCount: 5,
                  starSize: 30.0,
                  color: Colors.amber,
                  borderColor: Colors.grey,
                  spacing: 5.0,
                  allowHalfRating: true,
                  onRatingChanged: _onRatingChanged,
                ),
              ],
            ),
          ),
        );
      }
    }
    

在这个示例中,SimpleStarRating组件接受多个参数,包括:

  • rating:当前评分。
  • starCount:星星的数量。
  • starSize:星星的大小。
  • color:星星填充的颜色。
  • borderColor:星星边框的颜色。
  • spacing:星星之间的间距。
  • allowHalfRating:是否允许半星评分。
  • onRatingChanged:评分变化时的回调函数。

这样,你就可以在你的Flutter应用中使用simple_star_rating插件来实现星级评分功能了。

回到顶部