这篇文章主要介绍“怎么使用Flutter StrikeThroughTextAnimation实现文字中划线动画”，在日常操作中，相信很多人在怎么使用Flutter StrikeThroughTextAnimation实现文字中划线动画问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”怎么使用Flutter StrikeThroughTextAnimation实现文字中划线动画”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
StrikeThroughText(
text: "1. Task Item StrikeThroughText",
textStyle: const TextStyle(
fontSize: 18,
),
inactiveTextColor: Colors.red,
textColor: Colors.blue,
strikethrough: isCheck,
onChange: (value) {
setState(() {
isCheck = value;
});
},
)首先完成 widget 的布局和样式，这里采用了 Stack 布局，首先添加文字和文字样式，在文字的中间放置一个横线作为中划线。 大致布局如下：
Stack( children: [ Text( "Task Item", maxLines: 1, softWrap: false, style: TextStyle( fontSize: 18, ), ), Positioned( top: 0, bottom: 0, left: 0, right: 0, child: CustomPaint( painter: StrikeThroughTextPainter( ..., ), ), ), ], );
绘制中划线，首先需要知道要绘制多长。这里可以使用 TextPainter 来测绘文字的宽高,这里写成一个通用的方法，传入 Text 的text和textStyle，返回文字的宽高：
class TextSizeBox {
final double width;
final double height;
TextSizeBox({required this.width, required this.height});
factory TextSizeBox.fromText(String text, {TextStyle? textStyle}) {
final TextPainter textPainter = TextPainter(
text: TextSpan(text: text, style: textStyle),
maxLines: 1,
textDirection: TextDirection.ltr,
)..layout(minWidth: 0, maxWidth: double.infinity);
return TextSizeBox(width: textPainter.width, height: textPainter.height);
}
}知道了文字的宽就等于知道绘制文字的中划线宽度了。
StrikeThroughTextPainter( width: TextSizeBox.fromText(widget.text, textStyle: widget.textStyle).width, height: 2.0, color: Colors.grey, )
class StrikeThroughTextPainter extends CustomPainter {
final double width;
final double height;
final Color color;
StrikeThroughTextPainter(
{required this.width, required this.height, required this.color});
@override
void paint(Canvas canvas, Size size) {
final paint = Paint()
..color = color
..strokeWidth = height
..strokeCap = StrokeCap.round;
if (width > 0) {
canvas.drawLine(
Offset(0, size.height / 2),
Offset(width > size.width ? size.width : width, size.height / 2),
paint);
}
}
@override
bool shouldRepaint(StrikeThroughTextPainter oldDelegate) {
return width != oldDelegate.width || height != oldDelegate.height;
}
}首先是左右移动动画，先创建一个 AnimationController ,在创建一个Tween<Offset>来控制左右移动的偏移量
_offsetController = AnimationController( vsync: this, duration: const Duration(milliseconds: 100), ); _offsetAnimation = Tween<Offset>( begin: const Offset(0.0, 0.0), end: const Offset(0.2, 0.0), ).animate(CurvedAnimation( parent: _offsetController, curve: Curves.easeInOut, ));
使用 SlideTransition 来控制左右平移偏移量
SlideTransition( position: _offsetAnimation, child: Stack( ...... ), )
因为颜色变化和划中划线是同步进行的，所以只需要创建一个AnimationController来控制颜色和进度的动画
_animationController = AnimationController( vsync: this, duration: const Duration(milliseconds: 300), value: 1, ); _animation = Tween(begin: 0.0, end: 1.0).animate(_animationController); _animationColor = ColorTween( begin: Colors.black87, end: Colors.grey) .animate(_animationController);
接下来就是在需要动画的 widget 上放上动画就可以了.
import 'package:flutter/material.dart';
class StrikeThroughText extends StatefulWidget {
final String text;
final TextStyle textStyle;
final bool strikethrough;
final Color? textColor;
final Color? inactiveTextColor;
final ValueChanged? onChange;
const StrikeThroughText({
Key? key,
required this.text,
required this.textStyle,
this.strikethrough = false,
this.textColor,
this.inactiveTextColor,
this.onChange,
}) : super(key: key);
@override
StrikeThroughTextState createState() => StrikeThroughTextState();
}
class StrikeThroughTextState extends State<StrikeThroughText>
with TickerProviderStateMixin {
late AnimationController _animationController;
late Animation<double> _animation;
late Animation _animationColor;
late AnimationController _offsetController;
late Animation<Offset> _offsetAnimation;
@override
void initState() {
super.initState();
_animationController = AnimationController(
vsync: this,
duration: const Duration(milliseconds: 300),
value: widget.strikethrough ? 1 : 0,
);
_animation = Tween(begin: 0.0, end: 1.0).animate(_animationController);
_animationColor = ColorTween(
begin: widget.textColor ?? Colors.black87,
end: widget.inactiveTextColor ?? Colors.grey)
.animate(_animationController);
_offsetController = AnimationController(
vsync: this,
duration: const Duration(milliseconds: 100),
);
_offsetAnimation = Tween<Offset>(
begin: const Offset(0.0, 0.0),
end: const Offset(0.2, 0.0),
).animate(CurvedAnimation(
parent: _offsetController,
curve: Curves.easeInOut,
));
}
@override
void didUpdateWidget(covariant StrikeThroughText oldWidget) {
super.didUpdateWidget(oldWidget);
if (oldWidget.strikethrough != widget.strikethrough) {
if (widget.strikethrough) {
startAnimation();
} else {
reset();
}
}
}
@override
void dispose() {
_animationController.dispose();
_offsetController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
if (widget.strikethrough) {
widget.onChange?.call(false);
} else {
widget.onChange?.call(true);
}
},
child: SlideTransition(
position: _offsetAnimation,
child: Stack(
children: [
AnimatedBuilder(
animation: _animationController,
builder: (context, child) {
return Text(
widget.text,
maxLines: 1,
softWrap: false,
style: widget.textStyle.copyWith(
color: _animationColor.value,
overflow: TextOverflow.clip,
),
);
}),
// AnimatedDefaultTextStyle(
// style: widget.textStyle..copyWith(color: _animationColor.value),
// duration: const Duration(milliseconds: 500),
// child: Text(widget.text),
// ),
AnimatedBuilder(
animation: _animation,
builder: (context, child) {
return Positioned(
left: 0,
right: 0,
top: 0,
bottom: 0,
child: CustomPaint(
painter: StrikeThroughTextPainter(
width: TextSizeBox.fromText(widget.text,
textStyle: widget.textStyle)
.width *
_animation.value,
height: 2.0,
color: widget.inactiveTextColor ?? Colors.grey,
),
),
);
},
),
],
),
),
);
}
void startAnimation() async {
_animationController.reset();
await _offsetController.forward();
await _offsetController.reverse();
_animationController.forward();
}
void reset() {
_animationController.reset();
}
}
class StrikeThroughTextPainter extends CustomPainter {
final double width;
final double height;
final Color color;
StrikeThroughTextPainter(
{required this.width, required this.height, required this.color});
@override
void paint(Canvas canvas, Size size) {
final paint = Paint()
..color = color
..strokeWidth = height
..strokeCap = StrokeCap.round;
if (width > 0) {
canvas.drawLine(
Offset(0, size.height / 2),
Offset(width > size.width ? size.width : width, size.height / 2),
paint);
}
}
@override
bool shouldRepaint(StrikeThroughTextPainter oldDelegate) {
return width != oldDelegate.width || height != oldDelegate.height;
}
}
class TextSizeBox {
final double width;
final double height;
TextSizeBox({required this.width, required this.height});
factory TextSizeBox.fromText(String text, {TextStyle? textStyle}) {
final TextPainter textPainter = TextPainter(
text: TextSpan(text: text, style: textStyle),
maxLines: 1,
textDirection: TextDirection.ltr,
)..layout(minWidth: 0, maxWidth: double.infinity);
return TextSizeBox(width: textPainter.width, height: textPainter.height);
}
}到此，关于“怎么使用Flutter StrikeThroughTextAnimation实现文字中划线动画”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
