Flutter 文字中划线动画StrikeThroughTextAnimation

更新时间：2023年04月04日 14:48:54 作者：晓峰残月

这篇文章主要为大家介绍了Flutter 文字中划线动画StrikeThroughTextAnimation示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

概述

接上文 CheckBoxAnimation 动画，在加上文字的动画，刚好可以做一个组合的列表动画。文字部分动画主要就是左右移动、颜色变化以及在绘制文字中划线。

效果预览

基本使用

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的详细内容，更多关于Flutter 文字中划线的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

Android Support Palette使用详解
这篇文章主要介绍了Android Support Palette使用详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-07-07
android基于ListView和CheckBox实现多选和全选记录的功能
本篇文章主要介绍了android基于ListView和CheckBox实现多选和全选记录的功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
2016-11-11
android列表控件实现展开、收缩功能
这篇文章主要为大家详细介绍了android支持展开/收缩功能的列表控件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-11-11
android仿微信聊天界面语音录制功能
这篇文章主要为大家详细介绍了Android基于百度语音的语音交互功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-11-11
Android自定义View实现弹性小球效果
前段时间看到一个功能，是一个小球沿着固定轨迹弹动的效果，那么这篇文章小编给大家分享在Android中如何自定义View来实现弹性小球的效果，有需要的可以参考借鉴。
2016-09-09
Android账号注册实现点击获取验证码倒计时效果
这篇文章主要为大家详细介绍了Android账号注册过程中实现点击获取验证码倒计时效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-05-05
Android UI设计系列之ImageView实现ProgressBar旋转效果（1）
这篇文章主要为大家详细介绍了Android UI设计之ImageView实现ProgressBar旋转效果，具有一定的实用性和参考价值，感兴趣的小伙伴们可以参考一下
2016-06-06
Android播放视频的三种方式
这篇文章主要为大家详细介绍了Android播放视频的三种方式，使用其自带的播放器、VideoView、MediaPlayer类和SurfaceView来实现，感兴趣的小伙伴们可以参考一下
2016-07-07
Android CountDownTimer实现倒计时器
这篇文章主要为大家详细介绍了Android CountDownTimer实现倒计时效果的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-02-02
RecyclerVIew实现悬浮吸顶效果
这篇文章主要为大家详细介绍了RecyclerVIew实现悬浮吸顶效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-09-09