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中学习,所以任何关于如何修复我的代码或代码片段的线索都会对我有更好的帮助。
1条答案
按热度按时间wd2eg0qa1#
请参阅以下链接
https://pub.dev/packages/smooth_star_rating
或者
https://pub.dev/packages/flutter_rating_bar