在颤振中创建星级小部件

在编写应用程序时，我们经常需要创建漂亮的用户界面。其中一种方式是使用星级小部件来提供反馈和评级功能。在本文中，我们将介绍如何在颤振中创建星级小部件。

步骤

以下是创建星级小部件的步骤：

1. 创建颤振项目并导入所需的库，包括flutter/material.dart库和dart:ui库。
2. 创建一个继承StatefulWidget的新类，如RatingBar。
3. 在RatingBar类中创建一个名为_rating的私有变量，用于存储用户选择的等级。

class RatingBar extends StatefulWidget {
  @override
  _RatingBarState createState() => _RatingBarState();
}

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

4. 在_RatingBarState类中创建一个名为_buildRatingBar的私有方法，该方法将构建星级小部件。

Widget _buildRatingBar() {
  return Row(
    children: [
      Icon(Icons.star, size: 50.0),
      Icon(Icons.star, size: 50.0),
      Icon(Icons.star, size: 50.0),
      Icon(Icons.star, size: 50.0),
      Icon(Icons.star, size: 50.0),
    ],
  );
}

5. 在_buildRatingBar方法中，将所有五个星级图标放在一个Row小部件中。
6. 将_buildRatingBar方法返回到build方法中，其中build方法必须返回一个小部件。

class RatingBar extends StatefulWidget {
  @override
  _RatingBarState createState() => _RatingBarState();
}

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

  Widget _buildRatingBar() {
    return Row(
      children: [
        Icon(Icons.star, size: 50.0),
        Icon(Icons.star, size: 50.0),
        Icon(Icons.star, size: 50.0),
        Icon(Icons.star, size: 50.0),
        Icon(Icons.star, size: 50.0),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: _buildRatingBar(),
    );
  }
}

7. 通过在_RatingBarState类中创建一个名为_updateRating的私有方法，并在每个星型小部件上添加GestureDetector小部件，可以为星级小部件添加用户输入。

void _updateRating(int rating) {
  setState(() {
    _rating = rating.toDouble();
  });
}

Widget _buildRatingBar() {
  return Row(
    children: [
      GestureDetector(
        onTap: () => _updateRating(1),
        child: Icon(Icons.star, size: 50.0),
      ),
      GestureDetector(
        onTap: () => _updateRating(2),
        child: Icon(Icons.star, size: 50.0),
      ),
      GestureDetector(
        onTap: () => _updateRating(3),
        child: Icon(Icons.star, size: 50.0),
      ),
      GestureDetector(
        onTap: () => _updateRating(4),
        child: Icon(Icons.star, size: 50.0),
      ),
      GestureDetector(
        onTap: () => _updateRating(5),
        child: Icon(Icons.star, size: 50.0),
      ),
    ],
  );
}

8. 完成以上步骤后，您现在可以使用RatingBar小部件在您的颤振应用程序中创建星级小部件。

完整代码

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

class RatingBar extends StatefulWidget {
  @override
  _RatingBarState createState() => _RatingBarState();
}

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

  void _updateRating(int rating) {
    setState(() {
      _rating = rating.toDouble();
    });
  }

  Widget _buildRatingBar() {
    return Row(
      children: [
        GestureDetector(
          onTap: () => _updateRating(1),
          child: Icon(Icons.star, size: 50.0),
        ),
        GestureDetector(
          onTap: () => _updateRating(2),
          child: Icon(Icons.star, size: 50.0),
        ),
        GestureDetector(
          onTap: () => _updateRating(3),
          child: Icon(Icons.star, size: 50.0),
        ),
        GestureDetector(
          onTap: () => _updateRating(4),
          child: Icon(Icons.star, size: 50.0),
        ),
        GestureDetector(
          onTap: () => _updateRating(5),
          child: Icon(Icons.star, size: 50.0),
        ),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: _buildRatingBar(),
    );
  }
}