Flutter：在屏幕中更改卡片而不重建整个页面答案

【问题标题】：Flutter: Changing Cards in Screen without rebuilding the whole pageFlutter：在屏幕中更改卡片而不重建整个页面
【发布时间】：2020-12-29 10:12:09
【问题描述】：

我对 Flutter / Dart 很陌生，现在我遇到了问题。我的应用中有一个主页，它显示一个 AppBar、一个 BottomNavigationBar 和一个正文。正文是一张简单的卡片，里面有内容。问题是：我需要能够显示三张不同的卡片，具体取决于我从服务器获得的状态。所以有 ActiveCard、InactiveCard 和 ErrorCard。 ErrorCard 有一个返回 InactiveCard 的按钮，并且 ActiveCard 以及 InactiveCard 应该被包裹在 Inkwell 或类似物品中以开始骑行。

现在我想知道：我不确定如何实现这一切。我可以为每张卡片创建三个无状态小部件，并根据服务器状态“替换”或“更改”我主页中的正文吗？我在哪里可以“控制”当前状态？就像我说的那样，卡片需要是可点击的并“擦除”自己，以便为下面的卡片腾出空间（例如：InactiveTrip 被点击，现在应该有 ActiveTrip 的卡片，因为我开始了我的旅行，用户应该看到我的行程目前处于活动状态）

我真的不能提供代码，因为到目前为止我还没有真正能达到我期望的结果的东西。也许你有一些我可以使用的技巧和包。

【问题讨论】：

标签： flutter dart state

【解决方案1】：

您可以将 statelessWidget 转换为 statefulWidget ans 使用 setState() 方法。这是推荐用于小型应用程序，但如果您的应用程序更复杂，那么您必须学习状态管理，如提供程序、块模式或 Mvvm 架构。

【讨论】：

是的，我想过，但我的意思是我有三张不同的卡片，意味着三个小部件。我不确定是否可以使用 setState 擦除当前小部件并将其替换为另一个小部件......

【解决方案2】：

是的，您可以为此目的使用 statelessWidget。你可以使用bloc pattern

管理页面状态。

【讨论】：

【解决方案3】：

我将使用无状态的页面和流的卡片内容：

//Card model is your data modal
StreamController<Card> _streamController = StreamController();
Card _currentCard = /* default inactivate */;

StreamBuilder<bool>(
            stream: _streamController.stream,
            initialData: _currentCard,
            builder: (BuildContext context, AsyncSnapshot<Card> snapshot) {
              //return Container(/*content of your card*/);
            },
          ),

//Everytime you need to change the card content, you sink the new value
_streamController.sink.add(_currentCard = /*new card data modal*/);

【讨论】：

好的，如果我的内容每次都大不相同怎么办？不过感谢您的回复！