如何在 Flutter 中为容器的底部边框设置动画？

Posted 2023-02-23

【中文标题】如何在 Flutter 中为容器的底部边框设置动画？

【英文标题】：How to animate the bottom border of a container in Flutter?

【发布时间】：2021-01-23 12:35:00

【问题描述】：

我想创建一些与 TabBar 动画非常相似的东西。当您有两个选项卡并单击右侧的一个时，底部边框会呈现动画效果，就像它从一个容器（选项卡）过渡到另一个容器（选项卡）一样。我可以用容器的边框做那个动画吗？

这是我的容器的代码：

Container(
  width: MediaQuery.of(context).size.width / 2,
  decoration: BoxDecoration(
    border: Border(
      bottom: BorderSide(width: 2, color: Colors.blueAccent),
    ),
  ),
  child: Align(
    alignment: Alignment.center,
    child: Text(
      'Container',
      style: TextStyle(
        color: Colors.blueAccent,
        fontSize: 17.0,
        fontWeight: FontWeight.bold,
      ),
    ),
  ),
);

感谢您的帮助。

【参考方案1】：

我能够通过使用AnimatedContainer 而不是Container 来解决它：

AnimatedContainer(
  duration: Duration(milliseconds: 700),
  width: MediaQuery.of(context).size.width / 2,
  decoration: BoxDecoration(
    border: Border(
      bottom: BorderSide(width: 2, color: Colors.blueAccent),
    ),
  ),
  child: Align(
    alignment: Alignment.center,
    child: Text(
      'Container',
      style: TextStyle(
        color: Colors.blueAccent,
        fontSize: 17.0,
        fontWeight: FontWeight.bold,
      ),
    ),
  ),
);

如果有人需要，希望对您有所帮助。