flutter - 如何在初始小部件构建后使 AnimatedContainer 更改高度,而不是在单击按钮时更改高度

标签 flutter height duration animatedcontainer

                Expanded(
                  flex: 1,
                  child: Padding(
                    padding: const EdgeInsets.only(bottom: 3.0, right: 1),
                    child: AnimatedContainer(
                      duration: Duration(seconds: 1),
                      height: voteCountList[0],
                      decoration: BoxDecoration(
                        color: ColorChooser.graphColors[int.parse(optionsList[0]['color'])],
                        borderRadius: BorderRadius.all(Radius.circular(2))
                      ),
                    ),
                  ),
                ),

如我的代码片段所示,动画容器的高度为 voteCountList[0],如果值已更新,则此操作正常。但是,当最初构建小部件时,没有动画,并且容器的高度立即 = voteCountList[0]。我想实现 AnimatedContainer,以便看到容器的高度从 0 到 voteCountList[0]。这个高度需要在构建时设置动画。

最佳答案

如果您不想使用 AnimatedBuilder 或创建您自己的动画 Controller ,一种使用 Animatedcontainer 的方法是

class MyWidget extends StatelessWidget {
  Future<double> get _height => Future<double>.value(200);

  @override
  Widget build(BuildContext context) {
    return Padding(
        padding: const EdgeInsets.only(bottom: 3.0, right: 1),
        child: FutureBuilder<double>(
          future: _height,
          initialData: 0.0,
          builder: (context, snapshot) {
            return AnimatedContainer(
              duration: Duration(seconds: 1),
              width: 200,
              height: snapshot.data, //voteCountList[0],
              decoration: BoxDecoration(
                color: Colors.red,
                borderRadius: BorderRadius.all(Radius.circular(2))),
            );
        }
      )
    );
  }
}

你开始一个初始值为 0.0 的 future,在 tick 之后 future 解析(这是你已经拥有的值,你只是将它转换为 future 让他认为它会在 tick 中准备好)和动画将从 0 开始到解析的 future voteCountList[0]

关于flutter - 如何在初始小部件构建后使 AnimatedContainer 更改高度,而不是在单击按钮时更改高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62219322/

相关文章:

Dart BoundSinkStream 异常

java - 如何调整页面高度与内容高度?

java - 计算持续时间

r - 计算 R 中非连续事件的持续时间和顺序

javascript - 在javascript中将持续时间从秒转换为ISO格式

Flutter 横幅广告没有粘在底部

dart - const 在 Flutter 中定义 EdgeInsets 中的作用

flutter - 当 showMenu 方法在 flutter 中调用时,如何不关闭键盘?

css - 具有最大高度和滚动动态内容的对话框 + 页脚 css

ios - 动态调整 UITableViewCell 大小