首页 > 解决方案 > BlocBuilder 的构建功能不会重新加载

问题描述

目前,我正在尝试学习 bloc 模式的工作原理,但我遇到了一些问题。我正在尝试在颤振计数器应用程序上使用 BLOC 模式,这是颤振项目的默认应用程序。这是我的主要(布局)代码:

import 'package:flutter/material.dart';
import 'package:suaybtest/my-home-page-state.dart';
import 'my-home-page-bloc.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    final MyHomePageBloc _bloc = MyHomePageBloc();
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: BlocBuilder<MyHomePageEvent, MyHomePageState>(
            bloc: _bloc,
            builder: (context, MyHomePageState state) {
              return Center(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Text(
                      'You have pushed the button this many times:',
                    ),
                    Text(
                      '${state.counter}',
                      style: Theme.of(context).textTheme.display1,
                    ),
                  ],
                ),
              );
            }),
        floatingActionButton: Row(
          mainAxisAlignment: MainAxisAlignment.end,
          children: <Widget>[
            FloatingActionButton(
              onPressed: () {
                _bloc.dispatch(MyHomePageEvent.increment);
              },
              tooltip: 'Increment',
              child: Icon(Icons.add),
            ),
            FloatingActionButton(
              onPressed: () {
                _bloc.dispatch(MyHomePageEvent.decrement);
              },
              tooltip: 'Decrement',
              child: Icon(Icons.remove),
            ),
          ],
        ));
  }

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

Bloc页面是这样的:

import 'package:bloc/bloc.dart';
import 'package:suaybtest/my-home-page-state.dart';

enum MyHomePageEvent {
  increment,
  decrement,
}

class MyHomePageBloc extends Bloc<MyHomePageEvent, MyHomePageState> {
  @override
  MyHomePageState get initialState => MyHomePageState.initial();

  @override
  Stream<MyHomePageState> mapEventToState(MyHomePageEvent event) async* {
    MyHomePageState state = currentState;
    switch (event) {
      case MyHomePageEvent.increment:
        state.counter++;
        yield state;
        break;
      case MyHomePageEvent.decrement:
        state.counter--;  
        yield state;
        break;
    }
  }
}

最后这是我的状态

class MyHomePageState {
  int counter;

  MyHomePageState._();

  factory MyHomePageState.initial(){
    return MyHomePageState._()..counter = 0;
  }
}

我知道没有必要像这样使用状态类,因为我只有一个变量。然而,这是最接近真实世界应用程序的示例。

这里的问题是,当我单击按钮时,它会增加计数器,您可以在调试模式下显示它,但 blocbuilder 的构建功能不会重新加载。

我使用这个库

dependencies:
  flutter_bloc: ^0.11.1

标签: dartflutterbloc

解决方案


推荐阅读