怎么使用Flutter StrikeThroughTextAnimation实现文字中划线动画

这篇文章主要介绍“怎么使用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;        });    },)

实现

1、布局

首先完成 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(                  ...,              ),          ),        ),      ],    );

2、绘制中划线

绘制中划线，首先需要知道要绘制多长。这里可以使用 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;  }}

3、动画

首先是左右移动动画，先创建一个 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实现文字中划线动画”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！