Flutter中的动态实心星星;

k4emjkb1  于 2022-12-24  发布在  Flutter
关注(0)|答案(1)|浏览(158)

bounty将在6天后过期。回答此问题可获得+50的声望奖励。DiyorbekDev正在寻找规范答案

我正在尝试创建一个星星组件,可以动态填充从左边。到目前为止,我能够创建一个粗糙的星级使用自定义画家。

class StarPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    double w = size.width;
    double h = size.height;

    Path path = Path()
      ..moveTo(0, (2 * h) / 5)
      ..lineTo(w, (2 * h) / 5)
      ..lineTo(w / 5, h)
      ..lineTo(w / 2, 0)
      ..lineTo((4 * w) / 5, h)
      ..lineTo(0, (2 * h) / 5)
      ..close();

    Paint fillPaint = Paint()
      ..style = PaintingStyle.fill
      ..color = Colors.black;

    // canvas.drawPath(path, paint);
    canvas.drawPath(path, fillPaint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false;
  }
}

但是我不能想出如何将它的一部分显示为填充的。截至目前,我已经使用了一个+2大小的双堆栈作为边界,并使用了线性渐变的着色器遮罩来显示进度。
但是,如果没有这种粗糙的堆叠方式,能做到这一点吗?

Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: SizedBox(
            height: starSize,
            width: starSize,
            child: Stack(
              fit: StackFit.expand,
              children: [
                DynamicStar(percent: 1.0),
                Center(
                  child: SizedBox(
                    width: starSize - 2,
                    height: starSize - 2,
                    child: DynamicStar(percent: 0.8),
                  ),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }

class DynamicStar extends StatelessWidget {
  final double percent;
  const DynamicStar({Key? key, required this.percent}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ShaderMask(
      blendMode: BlendMode.srcATop,
      shaderCallback: (bounds) {
        return LinearGradient(
          tileMode: TileMode.clamp,
          colors: [Colors.black, Colors.white],
          begin: Alignment.centerLeft,
          end: Alignment.centerRight,
          stops: [percent, percent],
        ).createShader(bounds);
      },
      child: CustomPaint(painter: StarPainter()),
    );
  }
}

编辑:我正在尝试在flutter中学习,所以任何关于如何修复我的代码或代码片段的线索都会对我有更好的帮助。

wd2eg0qa

wd2eg0qa1#

请参阅以下链接
https://pub.dev/packages/smooth_star_rating
或者
https://pub.dev/packages/flutter_rating_bar

Smooth star rating example

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

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Star rating',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
            child: SmoothStarRating(
          rating: rating,
          isReadOnly: false,
          size: 80,
          filledIconData: Icons.star,
          halfFilledIconData: Icons.star_half,
          defaultIconData: Icons.star_border,
          starCount: 5,
          allowHalfRating: true,
          spacing: 2.0,
          onRated: (value) {
            print("rating value -> $value");
           
          },
        )),
      ),
    );
  }
}

相关问题