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

ehxuflar  于 2022-12-15  发布在  Flutter
关注(0)|答案(2)|浏览(134)

我有一个卡小工具,其中有一些信息和一个按钮。按下按钮,我想动画卡改变到不同的卡在同一位置。动画将在稍后添加。
根据我当前的代码,我使用一个bool来控制显示哪个小部件。
我的卡1有以下代码-

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的布尔值来控制显示哪一张卡片。有没有方法可以通过点击第二张卡片上的按钮来操作该变量?

bq8i3lrv

bq8i3lrv1#

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

ujv3wf0j2#

如果不想设置动画,可以使用“可见性”:

它需要一个replacement Widget,当visible为false时显示该Widget。

相关问题