Flutter如何实现文本滚动高亮效果(flutter,开发技术)

功能实现

因为在Text中会存在两段文本, 所以就不能单只用Text组件, 而改用Text.rich. 通过textSpan生成一个数组然后放到text.rich中. 所以本文需要处理, 而不是自己一个个拼接, 所以需要先有一个解析的类来负责处理.

需要在项目中加入第三方插件 string_scanner 用于扫描文本.

classStringParser{//导入的文本finalStringcontent;//高亮部分尾部索引,也就是两段的区分位置finalintendIndex;StringParser({requiredthis.content,requiredthis.endIndex});lateStringScanner_scanner;//解析函数InlineSpanparser(){_scanner=StringScanner(content);parseContent();finalList<InlineSpan>spans=[];intcurrentPosition=0;//需要高亮的部分spans.add(TextSpan(style:_spans.style,text:_spans.text(content)));currentPosition=_spans.end;//未高亮的部分if(currentPosition!=content.length){spans.add(TextSpan(text:content.substring(currentPosition,content.length)));}returnTextSpan(style:TextStyleSupport.defaultStyle,children:spans);}lateSpanBean_spans;//解析需要变成高亮的字符voidparseContent(){intstartIndex=0;_spans=SpanBean(startIndex,endIndex);if(!_scanner.isDone){_scanner.position++;}}}

之后需要定义一个高亮的数据类型, 用于方便修改之后想要高亮的文本样式和默认样式.

classSpanBean{SpanBean(this.start,this.end);finalintstart;finalintend;Stringtext(Stringsrc){returnsrc.substring(start,end);}TextStylegetstyle=>TextStyleSupport.highLightStyle;}classTextStyleSupport{staticconstdefaultStyle=TextStyle(color:Colors.black,fontSize:36);staticconsthighLightStyle=TextStyle(color:Colors.green,fontSize:36);}

至此文本高亮和非高亮处理完成, 只需要在文件中导入后使用.

滚动效果则需要实现一个play函数里通过 Future.delayed来控制延时递归执行.

_starPlay(flag){ //flag用于判断是执行还是暂停if(this.endIndex==content.length+1||!flag){return;}parser=StringParser(content:content,endIndex:this.endIndex++);span=parser.parser();setState((){});Future.delayed(Duration(milliseconds:100)).then((value){_starPlay(this.flag);});}

最终在文件里的代码则是

import'package:flutter/material.dart';import'string_parser.dart';voidmain(){runApp(MyApp());}classMyAppextendsStatelessWidget{//Thiswidgetistherootofyourapplication.@overrideWidgetbuild(BuildContextcontext){returnMaterialApp(title:'FlutterDemo',home:MyHomePage(),);}}classMyHomePageextendsStatefulWidget{MyHomePage({Key?key}):super(key:key);@override_MyHomePageStatecreateState()=>_MyHomePageState();}class_MyHomePageStateextendsState<MyHomePage>{lateInlineSpanspan;finalStringcontent="""一点不错，”狐狸说。“对我来说，你还只是一个小男孩，就像其他千万个小男孩一样。我不需要你。你也同样用不着我。对你来说，我也不过是一只狐狸，和其他千万只狐狸一样。但是，如果你驯服了我，我们就互相不可缺少了。对我来说，你就是世界上唯一的了；我对你来说，也是世界上唯一的了。""";lateStringParserparser;intendIndex=0;boolflag=true;@overridevoidinitState(){super.initState();parser=StringParser(content:content,endIndex:endIndex);span=parser.parser();}@overrideWidgetbuild(BuildContextcontext){returnScaffold(appBar:AppBar(title:Text("滚动高亮文本"),actions:[ElevatedButton(onPressed:(){this.flag=true;_starPlay(flag);print('开始');},child:Text("开始")),ElevatedButton(onPressed:(){this.flag=false;//_starPlay(flag);print('暂停');},child:Text("暂停"))],),body:Padding(padding:constEdgeInsets.all(20.0),child:Text.rich(span),));}_starPlay(flag){if(this.endIndex==content.length+1||!flag){return;}parser=StringParser(content:content,endIndex:this.endIndex++);span=parser.parser();setState((){});Future.delayed(Duration(milliseconds:100)).then((value){_starPlay(this.flag);});}}

实现效果: