Flutter 文字中划线动画StrikeThroughTextAnimation

Flutter 文字中划线动画 Flutter StrikeThroughTextAnimation 2023-05-14 11:05:22 720人浏览安东尼

摘要

目录概述效果预览基本使用实现1、布局2、绘制中划线3、动画完整代码概述接上文 CheckBoxAnimation 动画，在加上文字的动画，刚好可以做一个组合的列表动画。文字部分动

概述

接上文 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 文字中划线的资料请关注编程网其它相关文章！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: Flutter 文字中划线动画StrikeThroughTextAnimation

本文链接: https://www.lsjlt.com/news/203106.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

Flutter 文字中划线动画StrikeThroughTextAnimation

目录概述效果预览基本使用实现1、布局2、绘制中划线3、动画完整代码概述接上文 CheckBoxAnimation 动画，在加上文字的动画，刚好可以做一个组合的列表动画。文字部分动...

99+

2023-05-14

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

这篇文章主要介绍“怎么使用Flutter StrikeThroughTextAnimation实现文字中划线动画”，在日常操作中，相信很多人在怎么使用Flutter StrikeThroughTextAnimation实现文字中划线动画问题...

99+

2023-07-05
css怎么给文字加中划线

今天小编给大家分享一下css怎么给文字加中划线的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧...

99+

2022-10-19
Flutter Text 实现下划线、波浪线、删除线、背景色、渐变文字、阴影、描边、空心字

目录效果图1 下划线、删除线2 文字背景色 & 渐变色文字3 添加阴影、立体效果、文字描边3.1 文字阴影&立体效果3.2 粗略的文字描边&空心字体 4 空心文字效果图 1 ...

99+

2023-09-30

flutter Text 文字阴影空心文字文本删除线
div css怎么实现文字中划线

这篇文章主要介绍了div css怎么实现文字中划线的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇div css怎么实现文字中划线文章都会有所收获，下面我们一起来看看吧。代码&l...

99+

2022-10-19
CSS实现文字下波浪线动画效果

这篇文章主要介绍“CSS实现文字下波浪线动画效果”，在日常操作中，相信很多人在CSS实现文字下波浪线动画效果问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”CSS实现文字下波浪...

99+

2022-10-19
HTML5中怎么用Canvas实现文字动画特效

本篇内容介绍了“HTML5中怎么用Canvas实现文字动画特效”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成...

99+

2022-10-19
Android中怎么利用Xfermode实现动态文字加载动画

这篇文章将为大家详细讲解有关Android中怎么利用Xfermode实现动态文字加载动画，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。第一步：我们要熟悉一下这个图16个图形结果，其实现在有1...

99+

2023-05-30

android