Flutter 中使用 AnimatedContainer 让你的 Widget 动起来

这是我参与更文挑战的第3天，活动详情查看： 更文挑战

前言

我是 Zero

如果你的 App 页面简洁、清晰、主次分明，那么你是??

要是再加点的动画，那么你就是 ????

要是你觉得我的文章有所收获并且点赞支持，那么你就是 ??????

效果对比

下面两种效果你会选左边还是右边？

AnimatedContainer	Container

**

在差不多代码量的情况下，我会选择左边的，因为过渡带有动画，更加的自然流畅，反之右边的则非常的突兀

上代码

先看看代码咋实现的

/// 这里仅定义出核心代码，具体代码可以在 GitHub 上查看
/// GitHub 仓库地址： https://github.com/yy1300326388/flutter_widgets
// 定义属性
double width = 200;
double height = 100;
double padding = 10;
Color color = Colors.blueAccent;
Alignment alignment = Alignment.center;

// 左边
AnimatedContainer(
  width: width,
  height: height,
  padding: EdgeInsets.all(padding),
  color: color,
  alignment: alignment,
  duration: const Duration(milliseconds: 500),
  child: Text(
    'ZeroFlutter',
    style: TextStyle(
      color: Colors.white,
    ),
  ),
)
// 右边
Container(
  width: width,
  height: height,
  padding: EdgeInsets.all(padding),
  color: color,
  alignment: alignment,
  child: Text(
    'ZeroFlutter',
    style: TextStyle(
      color: Colors.white,
    ),
  ),
),

复制代码

/// 通过点击 FloatingActionButton 调用此方法，改变宽高
void play() async {
    var width = Random.secure().nextInt(150);
    var height = Random.secure().nextInt(100);
    this.width = width.toDouble() + 200;
    this.height = height.toDouble() + 100;
    setState(() {});
}
复制代码

上面可以看出我们只是使用了 AnimatedContainer Widget 并设置了一个 duration 动画执行时长就很简单的实现了上面的左边的效果，是非常简单方便的

多种动画组合

在实际情况下我们可能是多个属性同时在变化，那么 AnimatedContainer 有哪些属性是支持动画变换的呢？我们先看一个复杂效果

上代码

/// 这里除宽高外，增加了 padding、颜色、对齐方式
void play() async {
    var width = Random.secure().nextInt(150);
    var height = Random.secure().nextInt(100);
    var padding = Random.secure().nextInt(20);
    var a = Random.secure().nextInt(256);
    var r = Random.secure().nextInt(256);
    var g = Random.secure().nextInt(256);
    var b = Random.secure().nextInt(256);
    var x = Random.secure().nextInt(3);
    var y = Random.secure().nextInt(3);

    this.width = width.toDouble() + 200;
    this.height = height.toDouble() + 100;
    this.padding = padding.toDouble();
    this.color = Color.fromARGB(255, r, g, b);
    this.alignment = Alignment(x - 1, y - 1);
    setState(() {});
  }
复制代码

从上面属性可以推理出几乎所有 AnimatedContainer 可以改变的属性，这里都可以做成动画效果

属性列表

• width
• height
• padding
• margin
• color
• alignment
• border
• borderRadius
• boxShadow
• image
• gradient
• transform
• 等等

这里就不一一列举了，具体可以翻阅 AnimatedContainer 源码即可

动画曲线

动画效果要显的灵动一些就需要用到动画曲线，AnimatedContainer 为我们设置了 curve 属性很方面的就可以添加上动画曲线。

AnimatedContainer(
  ...
  duration: const Duration(milliseconds: 500),
  // 这里设置动画曲线
  curve: Curves.easeInBack,
  ...
)
复制代码

一些常见的动画曲线可以 查看 Curves 类，有各种动画曲线的效果

最后来个更复杂的

这里增加了 borderColor、borderWidth、radius、boxShadow 这些属性参数进来，依然可以自然的产生过渡动画效果，期待你使用这些参数添加上很好的创意。

源码仓库

基于 Flutter 2.2.1 版本

• Flutter Widgets

参考链接

• Flutter-AnimatedContainer
• AnimatedContainer (Flutter Widget of the Week)
• Flutter-Curves

关注专栏

• 此文章已收录到下面? 的专栏，可以直接关注
• 更多文章继续阅读｜系列文章持续更新

? 欢迎点赞➕收藏➕关注，有任何问题随时在下面?评论，我会第一时间回复哦