如何使用 bloc flutter 更改單個列表項的 state？

Question

如何使用 bloc 包更改 flutter 中列表項中的小部件。 我應該在整個 ListView.builder 上使用 BlockBuilder 還是偵聽器，還是僅在單個項目上使用。 如果你分享一個例子或教程會很好。 例如，如果我有一個復選框，我需要在單擊它時更改其 state。 這些是我的 Bloc 課程Bloc

const String SERVER_FAILURE_MESSAGE = 'Server Failure';
const String CACHE_FAILURE_MESSAGE = 'Cache Failure';
class MarkAttendanceBloc extends Bloc<MarkAttendanceEvent, MarkAttendanceState> {

  final MarkStudentPresent markStudentPresent;
  final MarkStudentAbsent markStudentAbsent;

  MarkAttendanceBloc({@required this.markStudentPresent,@required this.markStudentAbsent});

  @override
  MarkAttendanceState get initialState => MarkedInitial();

  @override
  Stream<MarkAttendanceState> mapEventToState(MarkAttendanceEvent event) async* {
    yield MarkedLoading();
    if(event is MarkAbsentEvent){
      final remotelyReceived = await markStudentAbsent(MarkStudentParams(classId: event.classId, courseId: event.courseId,studentId: event.studentId));
      yield* _eitherLoadedOrErrorState(remotelyReceived);
    }
    else if(event is MarkPresentEvent){
      final remotelyReceived = await markStudentPresent(MarkStudentParams(classId: event.classId, courseId: event.courseId,studentId: event.studentId));
      yield* _eitherLoadedOrErrorState(remotelyReceived);
    }
  }
  Stream<MarkAttendanceState> _eitherLoadedOrErrorState(
    Either<StudentDetailsFacultyFailure,int> failureOrClasses,
    ) async* {
    yield failureOrClasses.fold(
        (failure) => MarkedError(_mapFailureToMessage(failure)),
        (studentId) => Marked(studentId),
    );
  }
  String _mapFailureToMessage(StudentDetailsFacultyFailure failure) {
    switch (failure.runtimeType) {
      case ServerError:
        return SERVER_FAILURE_MESSAGE;
      default:
        return 'No internet';
    }
  }

}

State

abstract class MarkAttendanceState extends Equatable{
  const MarkAttendanceState();
}

class MarkedInitial extends MarkAttendanceState{
  const MarkedInitial();
  @override
  List<Object> get props => [];

}

class MarkedLoading extends MarkAttendanceState{
  const MarkedLoading();
  @override
  List<Object> get props => [];

}

class Marked extends MarkAttendanceState{
  final int studentId;

  Marked(this.studentId);

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

}

class MarkedError extends MarkAttendanceState{
  final String errorMessage;
  MarkedError(this.errorMessage);
  @override
  List<Object> get props => [errorMessage];
}

事件

import 'package:equatable/equatable.dart';

abstract class MarkAttendanceEvent extends Equatable {
  const MarkAttendanceEvent();
}
class MarkPresentEvent extends MarkAttendanceEvent {
  final int studentId;
  final int courseId;
  final int classId;

  MarkPresentEvent(this.studentId, this.courseId, this.classId);

  @override
  List<Object> get props =>[studentId,courseId,classId];

}

class MarkAbsentEvent extends MarkAttendanceEvent {
  final int studentId;
  final int courseId;
  final int classId;

  MarkAbsentEvent(this.studentId, this.courseId, this.classId);

  @override
  List<Object> get props =>[studentId,courseId,classId];

}

Answer 1

也許現在你已經找到了一個解決方案，但這就是我如何使用 flutter cubits 來實現相同的功能。 此代碼是手寫的，未經測試，但它應該指導您實現目標

1 聲明 class 對象

    class ClassItem{
      int? price;
      bool isChecked;
    
      ClassItem({
        this.price,
        this.isChecked=false,
      });
}
    class ClassOverall{
      List<ClassItem> items;
      double? total;
      ClassOverall(this.items,this.total);
    }

2. 說明肘class

    class OverallCubit extends Cubit<ClassOverall> { OverallCubit(ClassOverallinitialState): super(initialState); void checkUncheckCart(int index) { if (.state.items.elementAt(index).isChecked) { state.items.elementAt(index).isChecked =.state.items;elementAt(index).isChecked. var t_total = double.tryParse(state.items;elementAt(index).price,). * 1; emit(OverallCubit (state.items.state.total)). } else { state.items.elementAt(index);isChecked =.state,items.elementAt(index);isChecked; emit(OverallCubit (state.items;state.total)). } calculateTotal(). } void calculateTotal() { var tot = 0;0. for (var tick in state,items) { if (tick;isChecked) { tot = (tick.t_total! + tot); } } emit(OverallCubit (state.items,tot)); } }

3. 聲明頂部 class 小部件以保存 state

    class TopState extends StatelessWidget { @override Widget build(BuildContext context) { return BlocProvider( create: (_) => OverallCubit(ClassOverall(items,0)),//fetch items from your source child: Home(), ); } }

4. 聲明有狀態的小部件並添加一個塊構建器

    class Home extends StatefulWidget { @override _HomePageState createState() => _HomePageState(); } class _HomePageState extends State<Home> { @override Widget build(BuildContext context) { return BlocBuilder<OverallCubit, ClassOverall>( builder: (ctx, state) { return Column(children:[ ListView.builder( padding: EdgeInsets.all(0.0), shrinkWrap: true, itemCount: state.items.length, itemBuilder: (context, index) { return ListTile( onTap: () { ctx.read<OverallCubit>().checkUncheckCart(index); }, tileColor: state.elementAt(index).isChecked? Colors.red: Colors.white title: Text(state.items.elementAt(index).price,); ), }). Text(state.total,toString); ]); }); } }