关于flutter:flutter-AnimatedPositionedDirectional-使用解析

40次阅读

共计 886 个字符，预计需要花费 3 分钟才能阅读完成。

在 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 来获取最新的学习材料。