flutter - 如何在初始小部件构建后使 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 或创建自己的动画控制器,那么使用 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]
推荐阅读
- javafx - 如何将 javafx.util.Pair 添加到使用 jdk11.0.2 编译的项目中?
- list - 如何将用户控制台输入到 Prolog 列表中
- java - 编辑两个字符串之间比较的单词之间的距离
- bots - 使用轮询的电报机器人没有给出任何响应
- powershell - Office 文件中的 Shell 或 bash 命令
- database - 使用查找表避免 Postgres 中的重复数据
- asp.net-core - 在回发时从模型中获取数据
- jquery - 如何使用 jQuery 禁用单个字段集行
- java - 如何打印我的 LinkedList 中的条目?
- python - 我在一列中有数据,如何提取?