时间戳

首页 > 解决方案 > 更新事件后流值不会改变.. (Flutter,bloc)

flutter - 更新事件后流值不会改变.. (Flutter,bloc)

问题描述

我对颤动真的很陌生，现在我正在研究颤动中的 bloc 模式。所以我正在尝试实现一个用户单击按钮（蓝色或绿色）的功能，它应该将主题颜色更改为蓝色或绿色。但问题是我将 initiaData 设置为紫色，即使用户单击绿色或蓝色按钮，它也只显示橙色主题。

事件.dart

abstract class ChangeColorEvent {}

class ChangeToGreen extends ChangeColorEvent {}

class ChangeToBlue extends ChangeColorEvent {}

块飞镖

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:theme_change/bloc/colorTheme/event.dart';

class ColorThemeBloc {
  var _theme =
      ThemeData(brightness: Brightness.light, primaryColor: Colors.orange);

  final _colorStateController = StreamController();

  StreamSink get _inTheme => _colorStateController.sink;
  Stream get theme => _colorStateController.stream;

  final _colorEventController = StreamController<ChangeColorEvent>();



  Sink<ChangeColorEvent> get changeColorEventSink => _colorEventController.sink;

  ColorThemeBloc() {
    //wherever there's a new event we want to map it to a new state
    _colorEventController.stream.listen(_mapEventToState);
  }

  void _mapEventToState(ChangeColorEvent event) {
    print(event);
    if (event is ChangeToGreen)
      _theme =
          ThemeData(brightness: Brightness.light, primaryColor: Colors.red);
    else
      _theme =
          ThemeData(brightness: Brightness.light, primaryColor: Colors.pink);

    _inTheme.add(_theme);
    print(_theme);
  }

  void dispose() {
    _colorEventController.close();
    _colorStateController.close();
  }
}

主题更改.dart

import 'package:flutter/material.dart';
import 'package:theme_change/bloc/colorTheme/bloc.dart';
import 'package:theme_change/bloc/colorTheme/event.dart';

class ThemeChange extends StatelessWidget {
  // final bool isDarkThemeEnabled;
  // final ThemeBloc bloc;

  final _bloc = ColorThemeBloc();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            RaisedButton(
              onPressed: () {
                Navigator.pop(context);
              },
              color: Colors.grey,
              child: Text('GO BACK'),
            ),
            // ListTile(
            //   title: Text("Dark Theme"),
            //   trailing: Switch(
            //       value: isDarkThemeEnabled, onChanged: bloc.changeTheTheme),
            // ),
            RaisedButton(
              onPressed: () => _bloc.changeColorEventSink.add(ChangeToBlue()),
              color: Colors.blue,
              child: Text('blue'),
            ),
            RaisedButton(
              onPressed: () => _bloc.changeColorEventSink.add(ChangeToGreen()),
              color: Colors.green,
              child: Text('Green'),
            )
          ],
        ),
      ),
    );
  }
}

主要.dart

class MyApp extends StatelessWidget {
  final _bloc = ColorThemeBloc();
  @override
  Widget build(BuildContext context) {
    return StreamBuilder(
        initialData: ThemeData(
            brightness: Brightness.light, primaryColor: Colors.purple),
        stream: _bloc.theme,
        builder: (context, snapshot) {
          return MaterialApp(
            theme: snapshot.data,
            title: 'Flutter Demo',
            home: DemoScreen(),
          );
        });
  }
}

标签： flutterbloc

解决方案

您还没有在抽象事件上扩展 Equatable，它用于识别事件对象是否相同。将您的事件类更改为以下：

abstract class ChangeColorEvent extends Equatable{}

class ChangeToGreen extends ChangeColorEvent {
 // Add props, if you want to return data, else 
}

class ChangeToBlue extends ChangeColorEvent {
// Add props, if you want to return data, else 
}

推荐阅读