如何在 flutter 中忽略 state 與肘？

Question

我正在使用 cubit 管理小部件的 state，並且我只想在發出特定類型的 state 時更新小部件。

part of 'TestData.dart';

@immutable
abstract class TestState {}

class TestInitial extends TestState {}

class TestValueUpdated extends TestState {
  TestValueUpdated(this.message);
  
  final String message;

  @override
  bool operator ==(Object other) {
    return other is TestValueUpdated && other.message == message;
  }

  @override
  int get hashCode => message.hashCode;
}

class TestScaleUpdated extends TestState {
  TestScaleUpdated(this.message);

  final String message;

  @override
  bool operator ==(Object other) {
    return other is TestScaleUpdated && other.message == message;
  }

  @override
  int get hashCode => message.hashCode;
}

我創建了 state class 稱為TestState ，這個 class 目前有 3 個狀態：初始，值更新，規模更新

class TestData extends Cubit<TestState> {

//Codes here

  Future<void> keepPlayStatus() async {
    emit(TestValueUpdated(getTimeStamp()+" / "+getMaxTime()+"  |  "+getPosition()));
  }

  Future<void> updateScaleValueMessage() async {
    emit(TestScaleUpdated((size * 100).round().toInt().toString() + " %"));
  }
}

而這個名為TestData的 class 使用TestState並擴展了Cubit 。

基本上，當用戶通過捏住屏幕更新縮放值時，這個 class 會發出TestScaleUpdated state，當用戶玩東西時，它會發出TestValueUpdated state。

在 UI 中，

//somewhere of the codes, called widget A
child: BlocBuilder<TestData, TestState>(
  builder: (context, state) {
    if(state is TestValueUpdated) {
      return Text(
        state.message,
        textAlign: TextAlign.end,
        style: TextStyle(color: ThemeManager.getRGBfromHex(0x514745)),
      );
    } else {
      return Text(
        "00:00.000 / 00:04.800 | 1.1.1",
        textAlign: TextAlign.end,
        style: TextStyle(color: ThemeManager.getRGBfromHex(0x514745)),
      );
    }
  },
)

//the other part of the codes, called widget B
child: BlocBuilder<TestData, TestState>(
  builder: (context, state) {
    if(state is TestScaleUpdated) {
      return Text(
        state.message,
        textAlign: TextAlign.center,
        style: TextStyle(color: ThemeManager.getRGBfromHex(0x514745)) ,
      );
    } else {
      return Text(
        "100 %",
        textAlign: TextAlign.center,
        style: TextStyle(color: ThemeManager.getRGBfromHex(0x514745)) ,
      );
    }
  },
)

我試過這段代碼。 當TestData發出一些 state 時，這 2 個小部件會更新它們的狀態。 此代碼的問題是，如果用戶播放某些內容，由於不會發出TestScaleUpdated state，小部件 B 的狀態會返回到初始 state，始終顯示“100 %”。

如果用戶更新比例，則不會發出TestValueUpdated ，因此小部件 A 將始終具有初始 state，顯示“00:00.000 / 00:04.800 | 1.1.1”。

所以我現在要執行的是，我想讓小部件忽略狀態更新。 例如，在BlocBuilder的 builder 中

(context, state) {
  if(state is TestScaleUpdated) {
    return Text("Scale!");
  else if(state is TestInitial) {
    return Text("Initial!");
  } else {
    //ignore, or keep widget's status
  }
}

這里的問題，如果我解釋得更詳細一點，是這樣的：假設用戶玩了一些東西，所以小部件 A 的文本更改為00:10.000 / 00:40.000 | 2.0.0 00:10.000 / 00:40.000 | 2.0.0 。

然后，當用戶嘗試更改比例值時，不僅小部件 B 受到影響，而且小部件 A 也受到影響。 但由於TestData只發出了TestScaleUpdated state，小部件 A 的文本回到00:00.000 | 00:04.800 | 1.1.1 00:00.000 | 00:04.800 | 1.1.1 00:00.000 | 00:04.800 | 1.1.1雖然它應該保留它的文本和狀態。

我只想在發出TestScaleUpdated時更新小部件 B，並在發出TestValueUpdated時只更新小部件 A。 簡單地說，用一肘 class 以不同的方式管理 2 個或更多小部件。

我是否必須將這兩種狀態： TestScaleUpdated和TestValueUpdated合並到 1 state 中，每個小部件包含 2 條message ？

或者如果發出的 state 不滿足特定條件，我可以保留小部件的狀態嗎？

Answer 1

我將創建一個包含所有必需信息的 state。 但是，如果您只希望小部件僅在某些情況下重建，那么您可以為小部件 A 這樣做：

BlocBuilder<TestData, TestState>(
  buildWhen: (oldState, newState) => newState is TestValueUpdated;
  builder: (context, state) {
      return Text(
        state is TestValueUpdated ? state.message : "00:00.000 / 00:04.800 | 1.1.1",
        textAlign: TextAlign.end,
        style: TextStyle(color: ThemeManager.getRGBfromHex(0x514745)),
      );
  },
)