Flutter bloc 在 7.2.0 版本中没有用 Equatable 重建

Question

我创建了一个简单的应用程序来测试 bloc 7.2.0 并面临 BlocBuilder 在第一次成功重建后没有重建。在每个其他触发器上，bloc 都会发出新状态，但 BlocBuilder 会忽略它。

请注意，如果我从状态和事件中删除 extends Equatable 及其覆盖，那么每次按下按钮时 BlocBuilder 都会重建 UI。 Flutter 2.5.1 版

如果 Equatable 是必要的，为什么它不能使用它？如果 Equatable 不是必需的，为什么通过 VSCode 扩展在初始创建中使用它。

我的代码：

整体部分

import 'package:bloc/bloc.dart';
import 'package:equatable/equatable.dart';

//bloc
class MainBloc extends Bloc<MainEvent, MainState> {
  MainBloc() : super(MainInitial()) {
    on<MainButtonPressedEvent>(_onMainButtonPressedEvent);
  }

  void _onMainButtonPressedEvent(
      MainButtonPressedEvent event, Emitter<MainState> emit) {
    emit(MainCalculatedState(event.inputText));
  }
}

//states
abstract class MainState extends Equatable {
  const MainState();

  @override
  List<Object> get props => [];
}

class MainInitial extends MainState {}

class MainCalculatedState extends MainState {
  final String exportText;
  const MainCalculatedState(this.exportText);
}

//events
abstract class MainEvent extends Equatable {
  const MainEvent();

  @override
  List<Object> get props => [];
}

class MainButtonPressedEvent extends MainEvent {
  final String inputText;
  const MainButtonPressedEvent(this.inputText);
}

界面部分

import 'package:bloc_test/bloc.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: BlocProvider(
          create: (context) => MainBloc(),
          child: SubWidget(),
        ),
      ),
    );
  }
}

class SubWidget extends StatelessWidget {
  TextEditingController inputText = TextEditingController();
  String? exportText;

  @override
  Widget build(BuildContext context) {
    MainBloc mainBloc = BlocProvider.of<MainBloc>(context);

    return BlocBuilder<MainBloc, MainState>(
      builder: (context, state) {
        if (state is MainCalculatedState) {
          exportText = state.exportText;
        }
        return Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('${exportText ?? ''} data'),
              SizedBox(
                width: 200,
                child: TextField(
                  controller: inputText,
                ),
              ),
              ElevatedButton(
                  onPressed: () =>
                      mainBloc.add(MainButtonPressedEvent(inputText.text)),
                  child: const Text('Button')),
            ],
          ),
        );
      },
    );
  }
}

Answer 1

Equatable 用于让您轻松编程，了解状态如何以及何时相同（无更新）以及何时不同（更新）。

您的更新不起作用，因为您重复发送相同的状态，但您没有告诉 Equatable 扩展如何找出它们是否不同。所以它们都是一样的。

因此，为了确保您的程序了解某些相同类型的状态确实不同并且应该导致更新，您需要确保提及使它们不同的原因：

class MainCalculatedState extends MainState {
  final String exportText;
  const MainCalculatedState(this.exportText);

  // this tells the Equatable base class to consider your text property
  // when trying to figure out if two states are different.
  // If the text is the same, the states are the same, so no update
  // If the text is different, the states are different, so it will update 
  @override
  List<Object> get props => [this.exportText];
}

如果您完全删除 Equatable，则两个新实例化的状态从不相等，因此这也可以解决您的问题...除了在某些时候您希望它们成为，然后您需要重新添加。

Answer 2

您的 MainCalculatedState 需要从 Equatable 覆盖 props getter 并返回应该用于评估相等性的所有属性的列表。在您的情况下，它应该返回[exportText]。 示例：

class MainCalculatedState extends MainState {
  final String exportText;
  const MainCalculatedState(this.exportText);

  @override
  List<Object> get props => [exportText];
}