Flutter BloC无法刷新我的视图(计数器应用) [英] Flutter BloC not refresh my view (counter app)

问题描述

我正在尝试使用带有计数器测试应用程序的BloC库，但是当我使用对象来递增/递减计数器时，我的视图有一个小问题. MyObject.MyProperty递增或递减，但我的视图未刷新.为什么?

I'm trying BloC library with Counter test app but I have a little problem on my view when I use object to increment/decrement my counter. MyObject.MyProperty increment or decrement but my view not refreshed. Why?

示例应用，带有简单的int变量.

Sample app with simple int variable.

我的带有对象的代码:

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

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

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: BlocProvider(
        builder: (context) => CounterBloc(),
        child: CounterPage(),
      ),
    );
  }
}

class TestTest{
  int myProperty; 

  TestTest(){
    myProperty = 0;
  }
}


class CounterPage extends StatefulWidget {
  @override
  _CounterPageState createState() => _CounterPageState();
}

class _CounterPageState extends State<CounterPage> {
  @override
  Widget build(BuildContext context) {
    final counterBloc = BlocProvider.of<CounterBloc>(context);

    return Scaffold(
      appBar: AppBar(title: Text('Counter')),
      body: BlocBuilder<CounterBloc, TestTest>(
        builder: (context, myClassTestTest) { 
          return Center(
            child: Text(
              '${myClassTestTest.myProperty}',
              style: TextStyle(fontSize: 24.0),
            ),
          );
        },
      ),
      floatingActionButton: Column(
        crossAxisAlignment: CrossAxisAlignment.end,
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          Padding(
            padding: EdgeInsets.symmetric(vertical: 5.0),
            child: FloatingActionButton(
              child: Icon(Icons.add),
              onPressed: () {
                counterBloc.dispatch(CounterEvent.increment);
              },
            ),
          ),
          Padding(
            padding: EdgeInsets.symmetric(vertical: 5.0),
            child: FloatingActionButton(
              child: Icon(Icons.remove),
              onPressed: () {
                counterBloc.dispatch(CounterEvent.decrement);
              },
            ),
          ),
        ],
      ),
    );
  }
}


enum CounterEvent { increment, decrement }

class CounterBloc extends Bloc<CounterEvent, TestTest> {
  @override
  TestTest get initialState => TestTest();

  @override
  Stream<TestTest> mapEventToState(CounterEvent event) async* {
    switch (event) {
      case CounterEvent.decrement:        
        currentState.myProperty -= 1;
        yield currentState; 
        break;
      case CounterEvent.increment:
        currentState.myProperty += 1;
        yield currentState; 
        break;
    }
  }
}

如您所见，我对示例应用程序进行了一些编辑，只是添加了具有int属性myProperty的类TestTest.当我按一下按钮时，对象中的值会更改，但视图不会刷新.

As you can see I edited the sample app a little just to add my class TestTest with a int property myProperty. When I clic on my button the value in my object change but my view is not refreshed.

我该如何解决?

我在mapEventToState中找到了重新创建TestTest的解决方案，但是重新创建整个对象只是为了更新属性是很奇怪的.

I found a solution to recreate my TestTest in mapEventToState but it's weird to recreate an entire object just to update a property...

谢谢

推荐答案

我看到您正在使用某种redux实现，并且我不太确定在分派操作时它如何处理重建.

I see you are using some kind of redux implementation and i'm not quite sure how this handles the rebuild when actions are dispatched.

据我所知，您正在分派一个操作，该操作会更新小部件上的某些属性，但是您再也不会调用setState了，因此该小部件不会被重建.

As my knowledge you are dispatching an action that update some property on the widget but you are never calling setState again, so the widget is not being rebuild.

尝试在setState函数中调用递增或递减操作.

Try to call the increment or decrement actions inside a setState function.

类似这样的东西:

onPressed: () {
 setState(() => counterBloc.dispatch(CounterEvent.decrement));
},

这篇关于Flutter BloC无法刷新我的视图(计数器应用)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！