Flutter AnimatedContainer 在第一次渲染时不会动画

Question

我正在编写一个自定义条形图，并使用 AnimatedContainer 作为垂直条形图。我只有一个渲染，而且它没有动画。为了解决这个问题，我将所有条形的初始高度设置为零并强制重建。这可行，但有点混乱。还有另一种方法可以在不重建的情况下强制动画吗？

相关代码为：

AnimatedContainer /* BAR-CHART-ITEM */ (
  duration: const Duration(seconds: 1),
  curve: Curves.easeOut,
  width: widget.clsBarChart.dBarWidth,
  height: widget.isFirst
      ? 0
      : widget.dHeightScrollBarMax *
          widget.clsBarChart.lsdHeightFactors[widget.iNdxItem],

Answer 1

你是对的，强制重建动画可能效率很低。

以下是无需在自定义条形图中重建即可实现动画的几种方法：

AnimatedContainer(
  duration: const Duration(seconds: 1),
  curve: Curves.easeOut,
  width: widget.clsBarChart.dBarWidth,
  child: TweenAnimationBuilder(
    tween: Tween<double>(begin: 0.0, end: widget.isFirst ? 0.0 : widget.dHeightScrollBarMax * widget.clsBarChart.lsdHeightFactors[widget.iNdxItem]),
    duration: const Duration(seconds: 1),
    builder: (context, value, child) => Container(
      height: value, // Dynamically set height based on animation
      color: Colors.blue, // Add your bar color here
    ),
  ),
),

另一种选择是使用 Stack 并为两个小部件的可见性设置动画：一个高度为零，实际条形具有计算的高度。您可以使用 FadeTransition 或 SizeTransition 来为所需栏的外观设置动画。

Stack(
  children: [
    AnimatedPositioned(
      duration: const Duration(seconds: 1),
      curve: Curves.easeOut,
      bottom: 0,
      child: Container(
        height: 0.0, // Always zero height
        width: widget.clsBarChart.dBarWidth,
        color: Colors.transparent,
      ),
    ),
    AnimatedPositioned(
      duration: const Duration(seconds: 1),
      curve: Curves.easeOut,
      bottom: 0,
      child: FadeTransition(
        opacity: widget.isFirst ? 0.0 : 1.0,
        child: Container(
          height: widget.dHeightScrollBarMax * widget.clsBarChart.lsdHeightFactors[widget.iNdxItem],
          width: widget.clsBarChart.dBarWidth,
          color: Colors.blue, // Add your bar color here
        ),
      ),
    ),
  ],
),