1 
                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]。这个高度需要在构建时进行动画处理。

4

2 回答 2

3

如果您不想使用 AnimatedBuilder 或创建自己的动画控制器，那么使用 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 的初始值开始一个未来，并且在一个滴答之后期货解析（这是一个您已经拥有的值，您只是将它转换为一个未来，让他认为它会在一个滴答中准备好）并且动画将从0 到已解决的未来 voteCountList[0]

于 2020-06-05T16:08:15.307 回答
1

在 initState 中使用计时器更新值。所以动画在构建后开始。我正在改变容器的高度。

double heightValue=100.0;

void initState()
{
super.initState();
Timer(Duration(seconds: 0),(){
  setState(
(){
  heightValue=300.0;
});
});

}

AnimatedContainer(
      height: heightValue,
      width:200,
      color: Colors.red,
      child: Text('kk'),
      duration: Duration(seconds: 2)
  )
于 2020-06-05T16:07:39.107 回答