美文网首页
Flutter Widget 004: AnimatedCont

Flutter Widget 004: AnimatedCont

作者: 狂奔的胖蜗牛 | 来源:发表于2021-03-21 18:21 被阅读0次

1.概要

AnimatedContainer是一个Flutter中隐式动画Widget,当修改该Widget的特定属性后,比如颜色、边界、半径、背景图片、阴影、高度、宽度等等,调用setState就会使动画产生作用。动画会在旧的值和新的值之间持续的产生。

2.源码

AnimatedContainer({
    Key key,
    // 对齐方式
    this.alignment,
    // 填充
    this.padding,
    // 颜色
    Color color,
    // 背景装饰
    Decoration decoration,
    // 前景装饰
    this.foregroundDecoration,
    // 宽度
    double width,
    // 高度
    double height,
    // 约束
    BoxConstraints constraints,
    // 内部边距
    this.margin,
    // 旋转等变换
    this.transform,
    // 子Widget
    this.child,
    // 变化的方式,比如淡入淡出、平滑等
    Curve curve = Curves.linear,
    // 动画时长
    @required Duration duration,
    // 结束回调
    VoidCallback onEnd,
  })

3.示例

Widget build(BuildContext context) {
  return GestureDetector(
    onTap: () {
      setState(() {
        selected = !selected;
      });
     },
    child: Center(
      child: AnimatedContainer(
        width: selected ? 200.0 : 100.0,
        height: selected ? 100.0 : 200.0,
       color: selected ? Colors.red : Colors.blue,
       alignment: selected ? Alignment.center : AlignmentDirectional.topCenter,
        duration: Duration(seconds: 2),
        curve: Curves.fastOutSlowIn,
         child: FlutterLogo(size: 75),
      ),
    ),
   );
}

相关文章

网友评论

      本文标题:Flutter Widget 004: AnimatedCont

      本文链接:https://www.haomeiwen.com/subject/lahocltx.html