Flutter：在屏幕中更改卡片而不重建整個頁面

Question

我對 Flutter / Dart 很陌生，現在我遇到了問題。 我的應用中有一個主頁，它顯示一個 AppBar、一個 BottomNavigationBar 和一個正文。 正文是一張簡單的卡片，里面有內容。 問題是：我需要能夠顯示三張不同的卡片，具體取決於我從服務器獲得的狀態。 所以有 ActiveCard、InactiveCard 和 ErrorCard。 ErrorCard 有一個將 go 連接回 InactiveCard 的按鈕，ActiveCard 和 InactiveCard 應包裹在 Inkwell 或類似物品中以開始騎行。

現在我想知道：我不確定如何實現這一切。 我可以為每張卡片創建三個無狀態小部件，並根據服務器狀態“替換”或“更改”我主頁中的正文嗎？ 我在哪里可以“控制”當前狀態？ 就像我說的那樣，卡片需要是可點擊的並“擦除”自己，以便為下面的卡片騰出空間（例如：InactiveTrip 被點擊，現在應該有 ActiveTrip 的卡片，因為我開始了我的旅行，用戶應該看到我的行程目前處於活動狀態）

我真的不能提供代碼，因為到目前為止我還沒有真正接近我期望的結果。 也許你有一些我可以使用的技巧和包。

Answer 1

您可以將 statelessWidget 轉換為 statefulWidget ans use setState() 方法。這建議用於小型應用程序，但如果您的應用程序更復雜，那么您必須學習 state 管理，如提供程序、塊模式或 Mvvm 架構。

Answer 2

是的，您可以為此目的使用 statelessWidget。 你可以使用bloc 模式

管理頁面 state。

Answer 3

我將對頁面使用無狀態，對卡片內容使用 stream：

//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*/);