[译] 在 Flutter 中实现微光闪烁效果

最新推荐文章于 2024-06-15 13:04:33 发布

2401_84897220

最新推荐文章于 2024-06-15 13:04:33 发布

阅读量860

点赞数 24

分类专栏：程序员文章标签： flutter javascript 前端

本文链接：https://blog.csdn.net/2401_84897220/article/details/138983366

版权

程序员专栏收录该内容

76 篇文章 0 订阅

订阅专栏

第一个初始想法是在内容布局的顶部绘制一个不透明的渐变区域。虽然这可以实现，但不是一个好方法。我们不希望动画效果弄脏我们的整个白色背景。效果需要仅适用在给定的内容布局上。

现在是时候参考一下 Flutter 文档和示例代码去了解如何实现这种效果了。

经过研究我发现一个名为 SingleChildRenderObjectWidget 的基类，该基类露出一个 Canvas 对象。Canvas 是一个对象，它负责在屏幕上绘制内容，它有一个有趣的方法称为 saveLayer，它用来“在保存堆栈上保存当前变换和片段的副本，然后创建一个新的组，用于保存后续调用”（摘自官方文档）。这正是我需要的特性，它让我可以在特定内容布局上实现微光闪烁效果。

实现

在 Flutter 中，有一个很不错的小练习可以参考。一个 widget 通常包含一个名为 child 或 children 的参数，它可以帮助我们将变换应用到后代 widget。我们的 Shimmer widget 也有一个 child，它可以让我们创建任何我们想要的布局，然后将它作为 Shimmer 的 child 进行传递，Shimmer widget 反过来只会对那个 child 起作用。

import ‘package:flutter/material.dart’;

class Shimmer extends StatefulWidget {
final Widget child;
final Duration period;
final Gradient gradient;

Shimmer({Key key, this.child, this.period, this.gradient}): super(key: key);

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

class _ShimmerState extends State {
@override
Widget build(BuildContext context) {
return _Shimmer();
}
}

_Shimmer 是负责效果绘画的内部类。它从 SingleChildRenderObjectWidget 扩展而来并重写了 paint 方法来执行绘制任务。我们使用 Canvas 对象的 saveLayer 和 paintChild 方法来捕捉我们的 child 作为一个图层并在上面绘制渐变效果（带上一点 BlendMode 的魔法）。

import ‘package:flutter/rendering.dart’;

class _Shimmer extends SingleChildRenderObjectWidget {
final Gradient gradient;

_Shimmer({Widget child, this.gradient})

super(child: child);

@override
_ShimmerFilter createRenderObject(BuildContext context) {
return _ShimmerFilter(gradient);
}
}

class _ShimmerFilter extends RenderProxyBox {
final _clearPaint = Paint();
final Paint _gradientPaint;
final Gradient _gradient;

_ShimmerFilter(this._gradient)

_gradientPaint = Paint()…blendMode = BlendMode.srcIn;

@override
bool get alwaysNeedsCompositing => child != null;

@override
void paint(PaintingContext context, Offset offset) {
if (child != null) {
assert(needsCompositing);

final rect = offset & child.size;
_gradientPaint.shader = _gradient.createShader(rect);

context.canvas.saveLayer(rect, _clearPaint);
context.paintChild(child, offset);
context.canvas.drawRect(rect, _gradientPaint);
context.canvas.restore();
}
}
}

剩下的就是添加一个动效，让我们的效果动起来。这里没什么特别的，我们将创建一个动效来在绘制渐变之前从左到右移动 Canvas，这样就能产生渐变移动的效果。

我们在 _ShimmerState 中为动效创建一个新的 AnimationController。我们的 _Shimmer 类和 _ShimmerFilter 类还需要一个新变量（称之为 percent）来存储该动画执行的进度结果，并在每次 AnimationController 发出新值时调用 markNeedsPaint（这会让 widget 重新绘制）。Canvas 的移动位移量可以根据 percent 的值计算出来。

class _ShimmerState extends State with TickerProviderStateMixin {
AnimationController controller;

@override
void initState() {
super.initState();
controller = AnimationController(vsync: this, duration: widget.period)
…addListener(() {
setState(() {});
})
…addStatusListener((status) {
if (status == AnimationStatus.completed) {
controller.repeat();
}
});
controller.forward();
}

@override
Widget build(BuildContext context) {
return _Shimmer(
child: widget.child,
gradient: widget.gradient,
percent: controller.value,
);
}

@override
void dispose() {
controller.dispose();
super.dispose();
}

}

flutter_shimmer3_1.dart

class _Shimmer extends SingleChildRenderObjectWidget {
…
final double percent;

_Shimmer({Widget child, this.gradient, this.percent})

super(child: child);

@override
_ShimmerFilter createRenderObject(BuildContext context) {
return _ShimmerFilter(percent, gradient);
}

@override
void updateRenderObject(BuildContext context, _ShimmerFilter shimmer) {
shimmer.percent = percent;
}
}

class _ShimmerFilter extends RenderProxyBox {
…
double _percent;

_ShimmerFilter(this._percent, this._gradient)

_gradientPaint = Paint()…blendMode = BlendMode.srcIn;