时间戳

首页 > 解决方案 > 如何在颤动中同一位置的两个不同小部件之间切换？

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

问题描述

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

根据我当前的代码，我使用 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的布尔值来控制要显示的卡片。有没有办法可以通过第二张卡片中的按钮点击来操纵该变量？

标签： dartflutter

解决方案

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,
)

推荐阅读