时间戳

首页 > 解决方案 > 如何在 Flutter 中为容器的底部边框设置动画？

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

问题描述

我想创建一些与 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,
      ),
    ),
  ),
);

感谢您的帮助。

标签： flutteranimationdartmobile

解决方案

我能够通过使用 aAnimatedContainer而不是来解决它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,
      ),
    ),
  ),
);

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

推荐阅读