flutter - 如何以动画方式逐行突出显示段落?
问题描述
我正在文本中创建突出显示效果,并且此突出显示将在此处设置动画我能够实现突出显示效果,但我面临的问题是突出显示覆盖了整个段落,但我希望这件事逐行发生。
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)),
],
),
),
)
) );
}
}
解决方案
推荐阅读
- docker - Docker 上的 Apache2,卷上的文件不是渲染而是下载
- ruby-on-rails - 从开发环境中的应用程序收到不完整的响应
- javascript - jQuery隐藏过滤后有0个孩子的父母
- javascript - 构建后颤动Web重新加载资产数据
- html - 在 Angular 代码中,在 ngFor Iteration 之后,数据按列显示,但希望数据按行显示
- latex - 如何在 MNRAS LATEX 纸上添加子图?
- java - Swing MouseMoved 事件是否按输入顺序调度?
- python - ipython交互模式下函数的回声是什么?
- r - R中多项式GLM的SE逆估计(投资者:投资)
- reactjs - Azure Linux Web 应用程序上的下一个 js 应用程序 - 读取目录时出现错误 eisdir 非法操作