首页 > 解决方案 > 如何以动画方式逐行突出显示段落?

问题描述

我正在文本中创建突出显示效果,并且此突出显示将在此处设置动画我能够实现突出显示效果,但我面临的问题是突出显示覆盖了整个段落,但我希望这件事逐行发生。

 class _Home extends State<Home> with SingleTickerProviderStateMixin {
           static String sample="This is cow mnbc,msxvcnds,mvndsklmvlkdsmvlmdslfldsmfldsflkmdslfmkldskmfldsmflmslfmlsdmflsdmflkmds    ,m vdskmflsdmfldsfmdslf";
         late double _width=0;
           late AnimationController _controller;
         late Animation<double> _animation;
         final GlobalKey txtKey=GlobalKey();
        
        
        @override
          void didChangeDependencies() {
            _width=MediaQuery.of(context).size.width-10;
            _controller = AnimationController(
                duration: Duration(seconds:15),
                vsync: this);
            _animation = Tween<double>(begin: 0, end: _width/10).animate(_controller);
            _controller.forward();
        
            _controller.addListener(() {});
          }
        
          @override
          Widget build(BuildContext context) {
        
            return Scaffold(
                appBar: AppBar(),
                body: Center(
                    child: Padding(
                      padding: EdgeInsets.only(left:10,right:10),
                      child: IntrinsicHeight(
                        child: Stack(
                            fit: StackFit.loose,
                            children: [
                              AnimatedBuilder(
                                  animation:_animation,
                                  builder: (BuildContext context,_)
                                  {
                                    return Container(
                                        width:_animation.value*10, //width will increase dynamically to create highlighting effect
                                        color: Colors.purple
                                    );
                                  }
                              ),
                              Padding(
                                padding:EdgeInsets.only(top:5,bottom: 5,left:5,right:5),
                                child:Text(
                                    sample,
                                    key:txtKey,
                                      style: TextStyle(color: Colors.green, fontSize: 
    20,fontWeight:FontWeight.bold),
                                    textDirection: TextDirection.ltr)),
        
                            ],
                          ),
                      ),
                    )
                    ) );
          }
        } 

在此处输入图像描述

标签: flutterflutter-animation

解决方案


推荐阅读