flutter AnimatedPositionedDirectional 使用解析

2023-09-10 阅读 17 评论 0

摘要：在 Flutter 中，AnimatedPositionedDirectional 组件应用在 Stack 中，当位置或者是大小改变时，呈动画效果 const AnimatedPositionedDirectional({Key? key,required this.child,this.start,this.top,this.end,this.bottom,this.width,this.height,Curve

在 Flutter 中，AnimatedPositionedDirectional 组件应用在 Stack 中，当位置或者是大小改变时，呈动画效果

  const AnimatedPositionedDirectional({Key? key,required this.child,this.start,this.top,this.end,this.bottom,this.width,this.height,Curve curve = Curves.linear,required Duration duration,VoidCallback? onEnd,})

start 如果当前的环境是 TextDirection.ltr 文字方向从左向右，则是左对齐，反之是右对齐
end 如果当前的环境是 TextDirection.ltr 文字方向从左向右，则是右对齐，反之是左对齐
width 限制子组件的宽度
heght 限制子组件的高度
curve 动画曲线速率
duration 动画执行时间
onEnd 动画执行完成回调方法

使用 Demo

Directionality(// TextDirection.ltr  left to right  从左到右//  TextDirection.rtl rtl right to lefttextDirection: TextDirection.ltr,child: Stack(children: [AnimatedPositionedDirectional(top: 100,start: 100,width: 100,height: 200,duration: Duration(seconds: 2),//执行结束回调onEnd: () {},//动画曲线curve: Curves.fastOutSlowIn,child: Container(color: Colors.blue,child: Text("早起的年轻人"),),),],),
)