dart - 如何在 flutter 中的同一位置上的两个不同小部件之间切换？

Question

我有一个卡片小部件，其中包含一些信息和一个按钮。按下按钮时，我想为卡片设置动画以在同一位置更改为另一张卡片。稍后将添加动画。

根据我当前的代码，我使用 bool 值来控制要显示的小部件。

我的 card1 有以下代码-

SliverFillRemaining(
      child: Padding(
        padding: const EdgeInsets.only(
            top: 10.0, left: 6.0, right: 6.0, bottom: 6.0),
        child: detailsCardIsVisible ? Card(
            elevation: 2.0,
            clipBehavior: Clip.antiAlias,
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.all(Radius.circular(8.0))),
            child: productInfoCard()) : ProductEnquiryWidget()
      ),
    )

ProductEnquiryWidget 是第二张卡片。它有一个带有按钮的表单。我想要做的是在按下按钮时提交表单并动画回到第一张卡片。

我该怎么做？我不想将第二张卡片的代码与第一张卡片放在同一个文件中，因为这会使代码太大。

我正在使用一个名为 detailsCardIsVisible 的 bool 值来控制要显示的卡片。有没有一种方法可以通过点击第二张卡片中的按钮来操纵该变量？

Answer 1

https://docs.flutter.io/flutter/widgets/AnimatedCrossFade-class.html

AnimatedCrossFade(
  duration: const Duration(seconds: 3),
  firstChild: FirstChild(),
  secondChild: SecondChild(),
  crossFadeState: _first ? CrossFadeState.showFirst : CrossFadeState.showSecond,
)