如何在使用 Bloc flutter 单击按钮后更改文本

Question

所以我正在学习 bloc 的基础知识，我想知道如何使用没有 setstate() 的按钮更改文本，我一直在使用 setstate，但我想知道如何在之后更改文本使用 bloc、state、event 单击按钮。

这是我目前所拥有的

Main.dart

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
        providers: [
          BlocProvider(
            create: (_) => SecscreenBloc(),
          ),

        ],
        child: MaterialApp(
            onGenerateRoute: Routes().onGenerateRoute,
            title: 'Flutter Demo',
            theme: ThemeData(
              primarySwatch: Colors.blue,
            ),
            home: SecScreen()),
      );
  }
}

SecScreen.dart

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

  @override
  State<SecScreen> createState() => _SecScreenState();
}

class _SecScreenState extends State<SecScreen> {
  var numm = 1;
  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (context) => SecscreenBloc()..add(LoadSecscreenEvent(numm)),
      child: Scaffold(
        appBar: AppBar(
          title: Text("Bloc Increment"),
        ),
        body: BlocBuilder<SecscreenBloc,SecscreenState>(
          builder: (context,state){
            if(state is SecScreenLoadedState){
              return Column(
                children: [
                  Text("Activity:   ${state.number}"),
                  SizedBox(height: 30),
                  ElevatedButton(
                    onPressed: () => BlocProvider.of<SecscreenBloc>(context).add(LoadSecscreenEvent(
                      numm
                    )),
                    child: Icon(Icons.add),
                  ),
                ],
              );
            }
            return Container(
              color: Colors.red,
            );
          }
        ),
      ),
    );
  }
}

SecScreen_event.dart

abstract class SecscreenEvent extends Equatable {
  const SecscreenEvent();
}
class LoadSecscreenEvent extends SecscreenEvent{
  final int number;

  LoadSecscreenEvent(this.number);
  @override
  List<Object?> get props => [number];
}

SecScreen_state.dart

        part of 'secscreen_bloc.dart';

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

class SecscreenInitial extends SecscreenState {
  @override
  List<Object> get props => [];
}

class SecScreenLoadedState extends SecscreenState{

  final int number;
  SecScreenLoadedState(this.number);

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

secscreen_bloc.dart

class SecscreenBloc extends Bloc<SecscreenEvent, SecscreenState> {
  SecscreenBloc() : super(SecscreenInitial()) {
    on<LoadSecscreenEvent>((event, emit) {
      if (event is LoadSecscreenEvent){
        emit(SecScreenLoadedState(event.number + 1));
      }
    });
  }
}

我已经被困在这个问题上很长时间了，希望得到一些帮助！

Answer 1

实际上每次按下它都会改变，但每次值进入 bloc 1 和 back 2 所以你没有看到效果

只需更改以下行

onPressed: () => BlocProvider.of<SecscreenBloc>(context).add(LoadSecscreenEvent(
                  numm
                )),

到这个：

 onPressed: () => BlocProvider.of<SecscreenBloc>(context)
                  .add(LoadSecscreenEvent(state.number)),

如何在使用 Bloc flutter 单击按钮后更改文本

How to change text after button click using Bloc flutter

flutter

dart

bloc