Question

我正在使用 cubit 来管理小部件的状态，我想仅在发出特定类型的状态时才更新小部件。

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;
}

我创建了名为 TestState 的状态类，这个类目前有 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 的类使用 TestState 并扩展 Cubit。

基本上，当用户通过捏住屏幕更新缩放值时，该类会发出 TestScaleUpdated 状态，而当用户播放某些内容时，它会发出 TestValueUpdated 状态。

在用户界面中，

//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 发出某种状态时，这 2 个小部件会更新它们的状态。此代码的问题在于，如果用户播放某些内容，由于不会发出 TestScaleUpdated 状态，小部件 B 的状态会返回到初始状态，始终显示“100 %”。

如果用户更新缩放，则不会发出 TestValueUpdated，因此小部件 A 将始终具有初始状态，显示“00:00.000 / 00:04.800 | 1.1.1”。

所以我现在想要执行的是，我想让小部件忽略状态更新。例如，在 BlocBuilder

的构建器中

(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。

然后当用户尝试更改比例值时，不仅小部件 B 受到影响，小部件 A 也受到影响。但由于 TestData 只发出 TestScaleUpdated 状态，小部件 A 的文本返回到 00:00.000 | 00:04.800 | 1.1.1，而它应该保留其文本和状态。

我只想在发出 TestScaleUpdated 时更新小部件 B，并在发出 TestValueUpdated 时仅更新小部件 A。简单地说，用一个 cubit 类以不同的方式管理 2 个或更多小部件。

我是否必须将这 2 个状态：TestScaleUpdated 和 TestValueUpdated 合并为 1 个状态，每个小部件包含 2 个 message？

或者如果发出的状态不满足特定条件，我可以保留小部件的状态吗？

Answer 1

我会创建一个包含所有必需信息的状态。但是如果你只是想让小部件只在某些情况下重建，那么你可以为你的小部件 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)),
      );
  },
)

如何忽略颤动中肘的状态？

1 个答案: