flutter 如何使用Bloc发射对象

wyyhbhjk  于 2023-04-13  发布在  Flutter
关注(0)|答案(1)|浏览(152)

我复制official sample,它工作。

但是当我把int改为viewmodel的时候,它的值不会改变。
如何解决,谢谢。

class MainViewModel {
  int selectedColorIndex = -1;
}
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

import 'main_view_model.dart';

void main() {
  Bloc.observer = const AppBlocObserver();
  runApp(const App());
}

class AppBlocObserver extends BlocObserver {
  const AppBlocObserver();

  @override
  void onChange(BlocBase bloc, Change change) {
    super.onChange(bloc, change);
    if (bloc is Cubit) print(change);
  }

  @override
  void onTransition(Bloc bloc, Transition transition) {
    super.onTransition(bloc, transition);
    print(transition);
  }
}

class App extends StatelessWidget {
  const App({super.key});

  @override
  Widget build(BuildContext context) {
    return AppView();
  }
}

class AppView extends StatelessWidget {
  const AppView({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const CounterPage(),
    );
  }
}

class CounterPage extends StatelessWidget {
  const CounterPage({super.key});

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (_) => CounterBloc(),
      child: const CounterView(),
    );
  }
}

class CounterView extends StatelessWidget {
  const CounterView({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Counter')),
      body: Center(
        child: BlocBuilder<CounterBloc, MainViewModel>(
          builder: (context, viewModel) {
            return Text(
              '${viewModel.selectedColorIndex}',
              style: Theme.of(context).textTheme.displayLarge,
            );
          },
        ),
      ),
      floatingActionButton: Column(
        crossAxisAlignment: CrossAxisAlignment.end,
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          FloatingActionButton(
            child: const Icon(Icons.add),
            onPressed: () {
              context.read<CounterBloc>().add(CounterIncrementPressed());
            },
          ),
          const SizedBox(height: 4),
          FloatingActionButton(
            child: const Icon(Icons.remove),
            onPressed: () {
              context.read<CounterBloc>().add(CounterDecrementPressed());
            },
          ),
        ],
      ),
    );
  }
}

abstract class CounterEvent {}

class CounterIncrementPressed extends CounterEvent {}

class CounterDecrementPressed extends CounterEvent {}

class CounterBloc extends Bloc<CounterEvent, MainViewModel> {
  CounterBloc() : super(MainViewModel()) {
    on<CounterIncrementPressed>((event, emit) {
      state.selectedColorIndex + 1;
      emit(state);
    });
    on<CounterDecrementPressed>((event, emit) {
      state.selectedColorIndex - 1;
      emit(state);
    });
  }
}
dphi5xsq

dphi5xsq1#

问题是您没有在事件处理程序中正确更新状态。您需要使用更新的值创建MainViewModel的新示例并发出它。发出相同的对象不会触发Bloc中的状态更新

class MainViewModel {
  final int selectedColorIndex;

  MainViewModel({this.selectedColorIndex = 0});

  MainViewModel copyWith({int? selectedColorIndex}) {
    return MainViewModel(
      selectedColorIndex: selectedColorIndex ?? this.selectedColorIndex,
    );
  }
}
class CounterBloc extends Bloc<CounterEvent, MainViewModel> {
  CounterBloc() : super(MainViewModel()) {
    on<CounterIncrementPressed>((event, emit) {
      emit(state.copyWith(selectedColorIndex: state.selectedColorIndex + 1));
    });
    on<CounterDecrementPressed>((event, emit) {
      emit(state.copyWith(selectedColorIndex: state.selectedColorIndex - 1));
    });
  }
}

相关问题