Flutter :如何在没有评级操作的情况下实现评级栏

Flutter 是一个流行的跨平台移动应用开发框架，它允许开发者使用单一代码库来构建在 iOS 和 Android 上都能运行的应用。在 Flutter 中实现评级栏（Rating Bar）通常涉及到用户交互，即用户可以通过点击或滑动来改变评级值。

如果你想在没有用户评级操作的情况下实现评级栏，可能是因为你想展示一个预设的评级或者从服务器获取的评级数据。以下是如何在 Flutter 中实现这一功能的步骤：

基础概念

RatingBar: 一个 UI 组件，用于显示评级信息。
StatelessWidget: 一个不可变的组件，它不维护任何状态，通常用于构建静态 UI。
StatefulWidget: 一个可以维护状态的组件，适用于需要响应用户交互的场景。

类型

静态评级栏: 显示一个固定的评级值，不接受用户输入。
动态评级栏: 根据应用状态或外部数据源动态更新评级值。

应用场景

展示产品或服务的预设评级。
显示用户从服务器获取的个人或项目的评级。

实现方法

以下是一个简单的 Flutter 示例，展示如何创建一个静态评级栏：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Static Rating Bar Example'),
        ),
        body: Center(
          child: RatingBar(
            initialRating: 3.5, // 预设评级值
            minRating: 1,
            maxRating: 5,
            step: 0.5,
            unratedColor: Colors.grey,
            selectedColor: Colors.blue,
            onRatingChanged: (rating) {
              // 这里可以留空，因为我们不需要响应用户操作
            },
          ),
        ),
      ),
    );
  }
}

class RatingBar extends StatefulWidget {
  final double initialRating;
  final double minRating;
  final double maxRating;
  final double step;
  final Color unratedColor;
  final Color selectedColor;
  final Function(double) onRatingChanged;

  RatingBar({
    Key? key,
    required this.initialRating,
    required this.minRating,
    required this.maxRating,
    required this.step,
    required this.unratedColor,
    required this.selectedColor,
    required this.onRatingChanged,
  }) : super(key: key);

  @override
  _RatingBarState createState() => _RatingBarState();
}

class _RatingBarState extends State<RatingBar> {
  double _rating = 0;

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

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: List.generate(
        (widget.maxRating * 2).toInt(), // 生成足够多的星星
        (index) => Icon(
          Icons.star,
          color: index < _rating * 2 ? widget.selectedColor : widget.unratedColor,
          size: 24,
        ),
      ),
    );
  }
}