过渡时 Flutter 动画交叉淡入淡出溢出

Question

我有一个按钮组件，当它被告知组件正在加载时，我想显示一个加载微调器。我使用 AnimatedCrossFade.

在加载和非加载状态之间设置动画

我的问题是：返回到原始“未加载”状态时出现溢出错误。我知道这与 Row 和不同大小的小部件有关，但我尝试了 flex 小部件等的许多组合，并且 none 工作。我也尝试过在 this.isLoading 的变化上使用 Offstage。然而，这也没有用（并且基本上打败了动画师的观点）。

确实解决了溢出问题的解决方案，导致按钮成为我一直不想要的最大可能宽度。该按钮需要能够占用它所需的最小量 space。

 @override
  Widget build(BuildContext context) {
    return ElevatedButton(
        onPressed: isLoading ? () => null : () => onPressed(),
        style: ButtonStyle(
            backgroundColor: MaterialStateProperty.all(primaryColour)),
        child: AnimatedCrossFade(
          duration: Duration(milliseconds: 400),
          crossFadeState:
              isLoading ? CrossFadeState.showSecond : CrossFadeState.showFirst,
          firstChild: Padding(
            padding:
                const EdgeInsets.symmetric(vertical: 8.0, horizontal: 10.0),
            child: this.child,
          ),
          secondChild: Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              this.childWhenLoading,
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 8.0),
                child: SizedBox(
                  height: 20,
                  width: 20,
                  child: CircularProgressIndicator(
                    valueColor: AlwaysStoppedAnimation(Colours.white),
                    backgroundColor: primaryColour,
                    strokeWidth: 3,
                  ),
                ),
              )
            ],
          ),
        ));
  }

Answer 1

Flutter 团队已在此处解决此问题：https://youtu.be/PGK2UUAyE54?t=85。

我遇到了同样的问题，这对我有用：

AnimatedCrossFade(
  // ... Other arguments

  layoutBuilder: (topChild, topKey, bottomChild, bottomKey) {
    return Stack(
      alignment: Alignment.center,
      children: [
        Positioned(
          key: bottomChildKey,
          top: 0,
          child: bottomChild,
        ),
        Positioned(
          key: topChildKey,
          child: topChild,
        ),
      ],
    ),
  }
),

过渡时 Flutter 动画交叉淡入淡出溢出

Flutter Animated Cross Fade overflow on transition

flutter

flutter-layout

flutter-animation