当前位置 : 主页 > 手机开发 > android >

Flutter 文字中划线动画StrikeThroughTextAnimation

来源:互联网 收集:自由互联 发布时间:2023-05-16
目录 概述 效果预览 基本使用 实现 1、布局 2、绘制中划线 3、动画 完整代码 概述 接上文 CheckBoxAnimation 动画,在加上文字的动画,刚好可以做一个组合的列表动画。文字部分动画主要
目录
  • 概述
  • 效果预览
  • 基本使用
  • 实现
    • 1、布局
    • 2、绘制中划线
    • 3、动画
  • 完整代码

    概述

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

    效果预览

    StrikeThroughText_Preview.gif

    基本使用

    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 文字中划线的资料请关注自由互联其它相关文章!

    上一篇:AndroidVitamio和ExoPlayer两种播放器优劣分析
    下一篇:没有了
    网友评论