Question

我有一个Flutter应用程序，其中在listView小部件中显示了按员工姓名和销售人员的列表。我为每个员工有两个按钮来增加或减少他们的销售。

我正在使用flutter_bloc进行状态管理。

这里是Employee类。

class Employee extends Equatable {
  int _id;
  String _name;
  double _salery;

  Employee(this._id, this._name, this._salery);

  // setters
  set id(int id) {
    this._id = id;
  }

  set name(String name) {
    this._name = name;
  }

  set salery(double salery) {
    this._salery = salery;
  }

  // getters
  int get id => this._id;
  String get name => this._name;
  double get salery => this._salery;
}

这是该类的事件。

@immutable
abstract class EmployeeEvent {
  final int _index;
  EmployeeEvent(this._index);

  int get index => this._index;
}

class IncrementEvent extends EmployeeEvent {
  IncrementEvent(int index) : super(index);
}

class DecrementEvent extends EmployeeEvent {
  DecrementEvent(int index) : super(index);
}

这是处理状态的bloc类。

class EmployeeBloc extends Bloc<EmployeeEvent, List<Employee>> {
  @override
  List<Employee> get initialState => [
        Employee(1, 'Employee One', 10000.0),
        Employee(2, 'Employee Two', 10000.0),
        Employee(3, 'Employee Three', 10000.0),
        Employee(4, 'Employee Four', 10000.0),
        Employee(5, 'Employee Five', 10000.0),
      ];

  @override
  Stream<List<Employee>> mapEventToState(EmployeeEvent event) async* {
    // I have checked, the control reaches over here.
    double currentSalery = currentState[event.index].salery;
    if (event is IncrementEvent) {
      // Increments the salery when user presses the increment button
      currentState[event.index].salery = currentSalery + (currentSalery * 0.2);
    } else if (event is DecrementEvent) {
      currentState[event.index].salery = currentSalery - (currentSalery * 0.2);
    }
    print(currentState[event.index].salery); // even prints the incremented / decremented salery.
    yield currentState;
  }
}

产生后，将不会调用小部件类中的BlocBuilder。

如果我这样更改方法，那么它将调用BlocBuilder，但是我无法在特定索引处增加或减少员工的销售额。

@override
Stream<List<Employee>> mapEventToState(EmployeeEvent event) async* {
  if (event is IncrementEvent) {
    yield currentState;
  } else if (event is DecrementEvent) {
    yield currentState;
  }
}

如何在特定索引处增加或减少特定员工的营业额？

Answer 1

您的主要问题是您没有代表您所在州的任何班级。因此，首先您应该创建所需的状态。您可以使用bloc website中提供的简单示例。

为了全球了解：

BlocBuilder仅在以下情况下（使用equatable）会重建：

新状态和旧状态的实例运行时类型不同
新状态和旧状态的实例是相同的实例类型，它将深入比较前状态和新状态的所有嵌套属性，以通过调用==知道发生了什么变化。
您还可以使用在创建时提供的conditional属性函数。

如果要使用相同的实例，可以扩展Equatable（来自equatable软件包here）或执行相同的操作。（this中篇文章可以为您提供帮助。

根据您的情况，您可以这样做：

abstract class EmployeeState extends Equatable {
  EmployeeState([List props = const []]) : super(props);

  @override
  String toString() => '$runtimeType{}';
}

class EmployeeLoaded extends EmployeeState{
  EmployeeLoaded(this.employees):super([employees])

  final List<Employee> employees;
}

有关更多信息/帮助，请访问bloc gitter。

Answer 2

flutter bloc要求您产生状态的新实例，而不是修改currentState。

因此，我在以下课程中进行了以下更改。

class Employee extends Equatable {
  int id;
  String name;
  double salery;

  Employee(this.id, this.name, this.salery) : super([id, name, salery]);

  Employee copyWith({
    String name,
    double salery,
  }) {
    return Employee(this.id, name ?? this.name, salery ?? this.salery);
  }

  @override
  String toString() {
    return 'Employee { id: $id, name: $name, salery: $salery }';
  }
}

修改了mapEventToState方法，并添加了一个辅助方法来更新列表属性。

@override
  Stream<List<Employee>> mapEventToState(EmployeeEvent event) async* {
    yield this.updateList(event);
  }

  Stream<EmployeeState> updateList(EmployeeEvent event) async* {
    final id = (currentState as EmployeeLoaded).employee[event.index].id;

    List<Employee> employeeUpdate =
        (currentState as EmployeeLoaded).employee.map((employee) {
      if (employee.id == id) {
        return employee.copyWith(
            salery: (event is IncrementEvent)
                ? employee.salery + 200
                : employee.salery - 200);
      }
      return employee;
    }).toList();

    print((currentState as EmployeeLoaded).employee == employeeUpdate);
    print(currentState == EmployeeLoaded(employeeUpdate));

    yield EmployeeLoaded(employeeUpdate);
  }

在flutter_bloc中对`currentState`属性进行突变

2 个答案: