BlocBuilder 改变状态，但不改变屏幕上的文本

Question

我有以下问题： 我在 BLoC 架构上制作了一个迷你应用程序。 但我不会更改屏幕上的文字。

我也制作了类似的屏幕并且它们可以正常工作，也许我只是错过了一些东西，但我查看了官方文档，似乎一切都应该正常工作。

Flutter 版本-1.22.5

Bloc 和 Flutter Bloc 版本 - 6.1.0

谁能告诉你问题出在哪里？

这是应用程序代码：

main.dart

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

import 'bloc/hello_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: Scaffold(body: MyHomePage()),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final HelloBloc helloBloc = HelloBloc();

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (context) => HelloBloc(),
      child: BlocBuilder<HelloBloc, HelloState>(builder: (context, state) {
        if (state is HelloPrinted) {
          return Center(
            child: Row(
              children: [
                Text("Hello"),
                TextButton(
                    onPressed: () {
                      helloBloc.add(PrintBloc());
                    },
                    child: Text("Print Bloc"))
              ],
            ),
          );
        }
        if (state is BlocPrinted) {
          return Center(
            child: Row(
              children: [
                Text("Bloc"),
                TextButton(
                    onPressed: () {
                      helloBloc.add(PrintHello());
                    },
                    child: Text("Print hello"))
              ],
            ),
          );
        } else {
          return Center(
            child: Row(
              children: [
                Text("Start print hello first"),
                TextButton(
                    onPressed: () {
                      helloBloc.add(PrintHello());
                    },
                    child: Text("Print hello"))
              ],
            ),
          );
        }
      }),
    );
  }
}

hello_bloc.dart

import 'dart:async';

import 'package:bloc/bloc.dart';
import 'package:meta/meta.dart';

part 'hello_event.dart';
part 'hello_state.dart';

class HelloBloc extends Bloc<HelloEvent, HelloState> {
  HelloBloc() : super(HelloInitial());

  @override
  void onTransition(Transition<HelloEvent, HelloState> transition) {
    print(transition);
    super.onTransition(transition);
  }

  @override
  Stream<HelloState> mapEventToState(
    HelloEvent event,
  ) async* {
    if (event is PrintHello) {
      await Future<void>.delayed(const Duration(seconds: 1));
      yield HelloPrinted();
    }
    if (event is PrintBloc) {
      await Future<void>.delayed(const Duration(seconds: 1));
      yield BlocPrinted();
    }
  }
}

hello_event.dart

part of 'hello_bloc.dart';

@immutable
abstract class HelloEvent {}

class PrintHello extends HelloEvent {}

class PrintBloc extends HelloEvent {}

hello_state.dart

part of 'hello_bloc.dart';

@immutable
abstract class HelloState {}

class HelloInitial extends HelloState {}

class HelloPrinted extends HelloState {}

class BlocPrinted extends HelloState {}

提前感谢大家的回答。

Answer 1

看起来您正在创建HelloBloc 的两个实例。一个用于添加事件，另一个在 BlocProvider 中

class _MyHomePageState extends State<MyHomePage> {
  final HelloBloc helloBloc = HelloBloc();

return BlocProvider(
    create: (context) => HelloBloc(),

要解决此问题，请删除您用于保存为变量的实例（第一个）并添加您的事件使用 context.read<HelloBloc>().add(...)

这将调用正确的实例并更新您的 UI

Answer 2

您总是必须在两者之间发送另一个状态来更新状态。所以如果你想更新 HelloPrinted 你需要先发送像 yield InProgress() 这样的东西。

if (event is PrintHello) {
      yield InProgress();
      await Future<void>.delayed(const Duration(seconds: 1));
      yield HelloPrinted();