Flutter Cubit Bloc 构建器在发出后不会触发

Question

我在我的项目中使用 cubit。我只是想选择一些元素并在下一个中显示它 page.But 也将它存储在肘中以供我以后使用。但是当我选择一个元素时，它会进入肘和发射状态。但是 BlocBuilder 不会自行刷新，也不会重建我的小部件。我该怎么办？

我的代码：

肘

class TherapyCubit extends Cubit<TherapyState> {
  TherapyCubit() : super(TherapyInitial());

  List<Therapy> selectedTherapies = [];

  void addTherapy(Therapy therapy) {
    selectedTherapies.add(therapy);
    // inspect(selectedTherapies);
    emit(SelectedTherapy(therapy: selectedTherapies));
  }

  void deleteTherapy(Therapy therapy) {
    selectedTherapies.remove(therapy);
    emit(SelectedTherapy(therapy: selectedTherapies));
  }
}

肘国

abstract class TherapyState extends Equatable {
  const TherapyState();

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

class TherapyInitial extends TherapyState {}

class SelectedTherapy extends TherapyState {
  final List<Therapy> therapy;

  const SelectedTherapy({required this.therapy});

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

UI

我的自定义小部件列表：

Wrap(
                spacing: 16,
                runSpacing: 16,
                alignment: WrapAlignment.center,
                children: [
                  for (final therapy in therapyList)
                    BlocBuilder<TherapyCubit, TherapyState>(
                      bloc: TherapyCubit(),
                      builder: (context, state) {
                        if (state is SelectedTherapy) {
                          inspect(state.therapy); //cant see it
                        }
                        return EllipsisCard(  // I want to rebuild it whenever i choose a ellipsis card so it can be purple.
                          therapy: therapy,
                        );
                      },
                    )
                ],
              )

我的自定义小部件：

class _EllipsisCardState extends State<EllipsisCard> {
  @override
  Widget build(BuildContext context) {
    List<Therapy> selectedTherapies = context.read<TherapyCubit>().selectedTherapies;
    bool isHave = selectedTherapies.contains(widget.therapy);

    return InkWell(
      onTap: () {
        if (!isHave) {
          print("girdi");
          context.read<TherapyCubit>().addTherapy(widget.therapy);
        } else {
          context.read<TherapyCubit>().deleteTherapy(widget.therapy);
        }
      },
      child: Container(
        padding: const EdgeInsets.all(12),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(100),
          border: Border.all(color: isHave ? ColorService.purple : ColorService.grayBorderColor),
          color: isHave ? ColorService.purpleHalfOpacityBackground : Colors.white,
        ),
        child: Text(
          widget.therapy.name ?? "Unknown",
          style: TextStyle(color: isHave ? ColorService.purple : ColorService.blackText, letterSpacing: 0.1, fontSize: 14, fontWeight: isHave ? FontWeight.w500 : FontWeight.w400),
        ),
      ),
    );
  }
}

我哪里做错了？感谢帮助！ :))

Answer 1

发送列表副本以识别状态变化，例如：

void addTherapy(Therapy therapy) {
    selectedTherapies.add(therapy);
    // inspect(selectedTherapies);
    emit(SelectedTherapy(therapy: List.of(selectedTherapies)));
  }

  void deleteTherapy(Therapy therapy) {
    selectedTherapies.remove(therapy);
    emit(SelectedTherapy(therapy: List.of(selectedTherapies)));
  }

所以，完整的解决方案是这样的：

class Test extends StatefulWidget {
  const Test({Key? key}) : super(key: key);

  @override
  State<Test> createState() => _TestState();
}

class _TestState extends State<Test> {
  late List<Therapy> therapyList = [
    Therapy('one'),
    Therapy('two'),
    Therapy('three'),
    Therapy('four'),
  ];
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Column(
            children: [
              Wrap(
                spacing: 16,
                runSpacing: 16,
                alignment: WrapAlignment.center,
                children: [
                  for (final therapy in therapyList)
                    BlocBuilder<TherapyCubit, TherapyState>(
                      builder: (context, state) {
                        return EllipsisCard(
                          therapy: therapy,
                        );
                      },
                    )
                ],
              )
            ],
          ),
        ),
      ),
    );
  }
}

class TherapyCubit extends Cubit<TherapyState> {
  TherapyCubit() : super(TherapyInitial());

  List<Therapy> selectedTherapies = [];

  void addTherapy(Therapy therapy) {
    selectedTherapies.add(therapy);
    // inspect(selectedTherapies);
    emit(SelectedTherapy(therapy: List.of(selectedTherapies)));
  }

  void deleteTherapy(Therapy therapy) {
    selectedTherapies.remove(therapy);
    emit(SelectedTherapy(therapy: List.of(selectedTherapies)));
  }
}

abstract class TherapyState extends Equatable {
  const TherapyState();

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

class TherapyInitial extends TherapyState {}

class SelectedTherapy extends TherapyState {
  final List<Therapy> therapy;

  const SelectedTherapy({required this.therapy});

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

class EllipsisCard extends StatelessWidget {
  final Therapy therapy;
  EllipsisCard({required this.therapy, Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    List<Therapy> selectedTherapies =
        context.read<TherapyCubit>().selectedTherapies;
    bool isHave = selectedTherapies.contains(therapy);
    return InkWell(
      onTap: () {
        if (!isHave) {
          context.read<TherapyCubit>().addTherapy(therapy);
        } else {
          context.read<TherapyCubit>().deleteTherapy(therapy);
        }
      },
      child: Container(
        padding: const EdgeInsets.all(12),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(100),
          color: isHave ? Colors.purple : Colors.white,
        ),
        child: Text(
          therapy.name ?? "Unknown",
          style: TextStyle(
              letterSpacing: 0.1,
              fontSize: 14,
              fontWeight: isHave ? FontWeight.w500 : FontWeight.w400),
        ),
      ),
    );
  }
}

Flutter Cubit Bloc 构建器在发出后不会触发

Flutter Cubit Bloc builder doesnt trigger after emit

dart

flutter

flutter-bloc