flutter AnimatedPositionedDirectional 使用解析

Posted 2021-08-29 早起的年轻人

在 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 left
  textDirection: 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("早起的年轻人"),
        ),
      ),
    ],
  ),
)

如果你有兴趣 你可以关注一下公众号 biglead 来获取最新的学习资料。

• Flutter 从入门 到精通系列文章在这里
• 当然也必需是要有源码的 在这里了
• github 有点慢 不妨来看看码云的源码吧
• 系列学习教程在这里