为Flutter App打造高能星级评分控件：自定义、美观，让评分更有趣

2023-11-21 10:57:34

Flutter App开发中，评分控件是一个不可或缺的元素，它不仅能帮助用户对内容进行评价，还能为应用程序收集宝贵的用户反馈。然而，Flutter系统并没有提供现成的评分控件，市面上的自定义控件也未必能完全满足您的需求。

所以，让我们从零开始，一步步打造一个属于您自己的高大上星级评分控件。我们将从静态评分展示开始，然后逐步添加交互功能，最终实现一个可供用户评分的完整控件。

1. 搭建静态评分展示控件

首先，我们创建一个基本的评分展示控件，它将以星星的形式显示固定的评分值。这是代码片段：

import 'package:flutter/material.dart';

class StaticRatingBar extends StatelessWidget {
  final int rating;

  StaticRatingBar({Key? key, required this.rating}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Row(
      children: List.generate(5, (index) {
        return Icon(
          Icons.star,
          color: index < rating ? Colors.amber : Colors.grey,
          size: 24,
        );
      }),
    );
  }
}

在这个代码中，我们创建了一个名为StaticRatingBar的类，它继承自 StatelessWidget。构造函数接收一个rating参数，表示要显示的评分值。

在build方法中，我们使用Row来水平排列5个Icon小部件，每个Icon都代表一颗星星。通过判断index和rating的关系，我们可以控制星星的颜色：如果index小于rating，星星将呈现amber色，表示已点亮；否则，星星将呈现灰色，表示未点亮。

2. 实现动态评分交互

接下来，我们让评分控件支持用户交互，以便他们能够修改评分值。为此，我们需要对代码进行一些修改：

import 'package:flutter/material.dart';

class InteractiveRatingBar extends StatefulWidget {
  final int initialRating;

  InteractiveRatingBar({Key? key, required this.initialRating}) : super(key: key);

  @override
  State<InteractiveRatingBar> createState() => _InteractiveRatingBarState();
}

class _InteractiveRatingBarState extends State<InteractiveRatingBar> {
  int rating = 0;

  @override
  void initState() {
    super.initState();
    rating = widget.initialRating;
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      children: List.generate(5, (index) {
        return GestureDetector(
          onTap: () {
            setState(() {
              rating = index + 1;
            });
          },
          child: Icon(
            Icons.star,
            color: index < rating ? Colors.amber : Colors.grey,
            size: 24,
          ),
        );
      }),
    );
  }
}