[译] 在 Flutter 中实现微光闪烁效果
import 'package:flutter/material.dart';
class BlinkingLight extends StatefulWidget {
final Color color;
final double size;
final Duration interval;
const BlinkingLight({
Key? key,
this.color = Colors.white,
this.size = 24.0,
this.interval = const Duration(milliseconds: 500),
}) : super(key: key);
@override
_BlinkingLightState createState() => _BlinkingLightState();
}
class _BlinkingLightState extends State<BlinkingLight> with TickerProviderStateMixin {
late AnimationController controller;
@override
void initState() {
super.initState();
controller = AnimationController(
duration: widget.interval * 2,
vsync: this,
)..repeat(reverse: true);
}
@override
void dispose() {
controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: controller,
builder: (context, child) {
return Opacity(
opacity: controller.value,
child: Container(
width: widget.size,
height: widget.size,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: widget.color,
),
),
);
},
);
}
}
这段代码实现了一个可以闪烁的圆形灯泡控件,它使用了AnimationController
来控制闪烁的速率,并通过AnimatedBuilder
来重建widget以更新闪烁的效果。通过改变interval
属性,可以调整闪烁的速度。这个例子展示了如何在Flutter中创建和使用动画,并且是学习Flutter框架中动画相关概念的一个很好的起点。
评论已关闭