使用BLoC模式的Flutter默认计数器应用

如何解决使用BLoC模式的Flutter默认计数器应用

我是Flutter的新手，我正在尝试使用BLoC进行状态管理。 因此，我尝试使用BLoC重写flutter的默认计数器应用程序。 不幸的是，当按下添加按钮时，我的UI并未重新绘制。 我不知道我在做什么错 我正在使用

  bloc: ^6.1.0
  equatable: ^1.2.5
  flutter_bloc: ^6.0.6

这是我的代码

counter_event.dart

part of 'counter_bloc.dart';

abstract class CounterEvent extends Equatable {
  const CounterEvent();

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

class IncrementEvent extends CounterEvent {}

class DecrementEvent extends CounterEvent {}

counter_state.dart

part of 'counter_bloc.dart';

class CounterState extends Equatable {
  final int counter;
  const CounterState({@required this.counter});

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

counter_bloc.dart

import 'dart:async';

import 'package:bloc/bloc.dart';
import 'package:equatable/equatable.dart';
import 'package:flutter/foundation.dart';

part 'counter_event.dart';
part 'counter_state.dart';

class CounterBloc extends Bloc<CounterEvent,CounterState> {
  CounterBloc() : super(CounterState(counter: 0));

  @override
  Stream<CounterState> mapEventToState(CounterEvent event) async* {
    if (state is IncrementEvent) {
      yield CounterState(counter: state.counter + 1);
    } else if (state is DecrementEvent) {
      yield CounterState(counter: state.counter - 1);
    }
  }
}

这是主要功能

main.dart

import 'package:counter_bloc/bloc/counter_bloc.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',theme: ThemeData(
        primarySwatch: Colors.blue,visualDensity: VisualDensity.adaptivePlatformDensity,),home: Home(title: 'Flutter Demo Home Page'),);
  }
}

class Home extends StatefulWidget {
  Home({Key key,this.title}) : super(key: key);

  final String title;

  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  CounterBloc counterBloc = CounterBloc();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),body: BlocBuilder<CounterBloc,CounterState>(
        cubit: counterBloc,builder: (context,state) {
          return Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[
                Text(
                  'You have pushed the button this many times:',Text(
                  state.counter.toString(),style: Theme.of(context).textTheme.headline4,],);
        },floatingActionButton: FloatingActionButton(
        onPressed: () {
          counterBloc.add(IncrementEvent());
        },tooltip: 'Increment',child: Icon(Icons.add),);
  }

  @override
  void dispose() {
    counterBloc.close();
    super.dispose();
  }
}

解决方法

您可以在下面复制粘贴运行完整代码
步骤1：if (event is IncrementEvent)不是state
步骤2：您需要BlocProvider

home: BlocProvider<CounterBloc>(
        create: (context) => CounterBloc(),child: Home(
          title: "test",),

第3步：您需要致电BlocProvider.of<CounterBloc>

 Widget build(BuildContext context) {
    final CounterBloc counterBloc = BlocProvider.of<CounterBloc>(context);

工作演示

完整代码

import 'package:equatable/equatable.dart';
import 'package:flutter/material.dart';
import 'dart:async';

import 'package:bloc/bloc.dart';

import 'package:flutter/foundation.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

abstract class CounterEvent extends Equatable {
  const CounterEvent();

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

class IncrementEvent extends CounterEvent {}

class DecrementEvent extends CounterEvent {}

class CounterState extends Equatable {
  final int counter;
  const CounterState({@required this.counter});

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

class CounterBloc extends Bloc<CounterEvent,CounterState> {
  CounterBloc() : super(CounterState(counter: 0));

  @override
  Stream<CounterState> mapEventToState(CounterEvent event) async* {
    print(event.toString());
    if (event is IncrementEvent) {
      print("inc");
      yield CounterState(counter: state.counter + 1);
    } else if (state is DecrementEvent) {
      yield CounterState(counter: state.counter - 1);
    }
  }
}

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',theme: ThemeData(
        primarySwatch: Colors.blue,visualDensity: VisualDensity.adaptivePlatformDensity,home: BlocProvider<CounterBloc>(
        create: (context) => CounterBloc(),);
  }
}

class Home extends StatefulWidget {
  Home({Key key,this.title}) : super(key: key);

  final String title;

  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    final CounterBloc counterBloc = BlocProvider.of<CounterBloc>(context);
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),body: BlocBuilder<CounterBloc,CounterState>(
        //cubit: counterBloc,builder: (context,state) {
          return Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[
                Text(
                  'You have pushed the button this many times:',Text(
                  state.counter.toString(),style: Theme.of(context).textTheme.headline4,],);
        },floatingActionButton: FloatingActionButton(
        onPressed: () {
          print("click");
          counterBloc.add(IncrementEvent());
        },tooltip: 'Increment',child: Icon(Icons.add),);
  }
}

,

这是你的错

if (state is IncrementEvent) {
  yield CounterState(counter: state.counter + 1);
} else if (state is DecrementEvent) {
  yield CounterState(counter: state.counter - 1);
}

改为

if (event is IncrementEvent) {
  yield CounterState(counter: state.counter + 1);
} else if (event is DecrementEvent) {
  yield CounterState(counter: state.counter - 1);
}