图标大小动画 onPressed答案

【问题标题】：Icons size animation onPressed图标大小动画 onPressed
【发布时间】：2020-02-21 23:23:15
【问题描述】：

我有带有行图标的 BottomAppBar。

BottomAppBar(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[
              IconButton(),
              IconButton(),
              IconButton(),
            ],
          ))

我想制作一个流畅的动画，这样当你点击一个图标时，它会缩小然后恢复到原来的大小。我称之为水龙头效应。我知道一种通过一堆动画控制器来做到这一点的方法，但是有没有办法让它更容易，比如 AnimatedSize 或其他？
这样的：
0：图标大小 = 20.0
1: onPressed: IconSize = 15.0
2：图标大小 = 20.0

【问题讨论】：

你试过用插件吗？
@Marat 很遗憾我做不到
那我觉得没有一堆AnimationControllers是不可能的

标签： flutter flutter-layout flutter-animation

【解决方案1】：

尝试使用AnimatedContainer 小部件来执行此操作并将其包装到GestureDetector 中，并像这样更改容器的宽度和高度：

bool selected = false;

BottomAppBar(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: <Widget>[
          GestureDetector(child: AnimatedContainer(child: Icon(), width: selected ? 15.0 : 20.0), onTap: () {
  setState(() {
    selected = !selected;
  });
},),
          AnimatedContainer(child: Icon(), width: selected ? 15.0 : 20.0),
          AnimatedContainer(child: Icon(), width: selected ? 15.0 : 20.0),
        ],
      ))

【讨论】：

【解决方案2】：

您可以通过AnimatedBuilder、TweenSequence 和AnimationController 实现这一目标。 AnimatedBuilder 的官方文档很好地解释了设置（即使有视频）。

您的TweenSequence 可能如下所示：

final Animation<double> animation = TweenSequence(
  <TweenSequenceItem<double>>[
    TweenSequenceItem<double>(
      tween: Tween<double>(begin: 20.0, end: 15.0)
        .chain(CurveTween(curve: Curves.ease)),
      weight: 50.0,
    ),
    TweenSequenceItem<double>(
      tween: Tween<double>(begin: 15.0, end: 20.0)
        .chain(CurveTween(curve: Curves.ease)),
      weight: 50.0,
    ),
  ],
).animate(myAnimationController);

【讨论】：