1.bloc基本使用

• 1.State实不实现 Equatable接口都可以，刷新数据取决于listenWhen或者buildWhen返回值

import 'dart:async';

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

<!--more-->
abstract class TTEvent {}

class TTInitEvent extends TTEvent {}

class TTRequestEvent extends TTEvent {}

class TTClickEvent extends TTEvent {}

// abstract class TTState implements Equatable {}
//
// class TTInitState extends TTState {
//   @override
//   List<Object?> get props => ["a"];
//
//   @override
//   bool? get stringify => throw UnimplementedError();
// }
//
// class TTRequestSuccessState extends TTState {
//   @override
//   List<Object?> get props => ["b"];
//
//   @override
//   bool? get stringify => throw UnimplementedError();
// }
//
// class TTClickSuccessState extends TTState {
//   @override
//   List<Object?> get props => ["c"];
//
//   @override
//   bool? get stringify => throw UnimplementedError();
// }

abstract class TTState {}

class TTInitState extends TTState {}

class TTRequestSuccessState extends TTState {}

class TTClickSuccessState extends TTState {}

class TTBloc extends Bloc<TTEvent, TTState> {
  TTBloc(TTState initialState) : super(initialState) {
    // on<TTInitEvent>(request);
    // on<TTClickEvent>(click);

    on<TTRequestEvent>((event, emit) {
      request(event, emit);
    });
    on<TTClickEvent>((event, emit) {
      click(event, emit);
    });
  }

  FutureOr<void> request(TTRequestEvent event, Emitter<TTState> emit) {
    emit.call(TTRequestSuccessState());
  }

  FutureOr<void> click(TTClickEvent event, Emitter<TTState> emit) {
    emit.call(TTClickSuccessState());
  }
}

• 2.BlocListener使用，当状态变化时会先触发listenWhen再触发listener
  • 注意：一定要状态不同时才会触发更新，比如在创建TTBloc（创建的时候有一个InitState）之后没有再向里面推一个事件是不会触发listenWhen和listener

class BlocListenerr extends StatelessWidget {
  late TTBloc bloc;

  @override
  Widget build(BuildContext zz) {
    return BlocProvider<TTBloc>(
      create: (BuildContext cc) {
        print("lyll BlocListenerr BlocProvider create");
        bloc = TTBloc(TTInitState());
        bloc.add(TTRequestEvent());
        return bloc;
      },
      child: BlocListener<TTBloc, TTState>(
        listener: (BuildContext context, TTState state) {
          print("lyll BlocListener listener ${state.runtimeType}");
          if (state is TTInitState) {
            context.read<TTBloc>().add(TTRequestEvent());
          }
        },
        listenWhen: (previous, current) {
          print(
              "lyll BlocListenerr listenWhen ${previous.runtimeType} ${current.runtimeType}");
          return true;
        },
        child: Container(
          width: 300,
          height: 300,
          color: Colors.cyan,
          child: Center(
            child: GestureDetector(
              onTap: () {
                print("lyll BlocListenerr click");
                bloc.add(TTClickEvent());
              },
              child: Container(
                width: 100,
                height: 100,
                color: Colors.amberAccent,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

• 3.BlocBuilder使用
  • 先buildWhen再builder
  • 需要在builder中去判断state，而不是在buildWhen判断

class BlocBuilderr extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocProvider<TTBloc>(
      create: (BuildContext context) {
        return TTBloc(TTInitState());
      },
      child: BlocBuilder<TTBloc, TTState>(
          // bloc: TTBloc(TTInitState()),
          buildWhen: (previous, current) {
        print(
            "lyll BlocBuild buildWhen ${previous.runtimeType} ${current.runtimeType}");
        return true;
      }, builder: (BuildContext context, TTState state) {
        print("lyll BlocBuilderr builder ${state.runtimeType}");
        if (state is TTInitState) {
          context.watch<TTBloc>().add(TTRequestEvent());
        } else if (state is TTClickSuccessState) {}
        return Container(
          width: 300,
          height: 300,
          color: Colors.cyan,
          child: Center(
            child: GestureDetector(
              onTap: () {
                context.read<TTBloc>().add(TTClickEvent());
              },
              child: Container(
                width: 100,
                height: 100,
                color: Colors.amberAccent,
              ),
            ),
          ),
        );
      }),
    );
  }
}

• 4.BlocConsumer使用
  • 先listenWhen再listener再buildWhen最后builder
  • 使用注意和BlocListener一样

class BlocConsumerr extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (BuildContext context) {
        return TTBloc(TTInitState());
      },
      child: BlocConsumer<TTBloc, TTState>(
        listener: (BuildContext context, TTState state) {
          print("lyll BlocConsumerr listener ${state.runtimeType}");
        },
        // bloc: TTBloc(TTInitState()),
        listenWhen: (previous, current) {
          print(
              "lyll BlocConsumerr listenWhen ${previous.runtimeType} ${current.runtimeType}");
          return true;
        },
        buildWhen: (previous, current) {
          print(
              "lyll BlocConsumerr buildWhen ${previous.runtimeType} ${current.runtimeType}");
          return true;
        },
        builder: (BuildContext ctx, TTState state) {
          if (state is TTInitState) {
            ctx.read<TTBloc>().add(TTRequestEvent());
          } else if (state is TTClickSuccessState) {}
          return Container(
            width: 300,
            height: 300,
            color: Colors.cyan,
            child: Center(
              child: GestureDetector(
                onTap: () {
                  print("lyll BlocConsumerr TTClickEvent");
                  ctx.read<TTBloc>().add(TTClickEvent());
                },
                child: Container(
                  width: 100,
                  height: 100,
                  color: Colors.amberAccent,
                ),
              ),
            ),
          );
        },
      ),
    );
  }
}