Flutter

Flutter 使用 Bloc

2021-06-01  本文已影响0人  李小轰

初学flutter,我们知道flutter有state状态的概念。当数据有变动时,通过调用setState方法进行状态变更,UI重新绘制。

今天,我们来说说flutter里用于管理状态的利器Bloc。Bloc的核心思想是对Stream流的使用,整体使用MVVM的交互模式。

安装
dependencies:
  flutter_bloc: ^7.0.0
  //^6.0.1非空安全
使用方式
  1. 新建 test_bloc.dart 文件,定义bloc类,state类,event类:
import 'package:flutter_bloc/flutter_bloc.dart';

class TestBloc extends Bloc<TestEvent, TestState> {

  TestState _curretnState;
  TestBloc(TestState initialState) : super(initialState){
    _curretnState = initialState;
  }

  @override
  Stream<TestState> mapEventToState(TestEvent event) async* {
    if(event is InCreaseEvent){
      ///对当前状态count属性进行+1操作
      _curretnState.count++;
      ///yield 往流注入更新内容
      yield _curretnState.copy();
    }
  }
}

///bloc状态
class TestState {
  int count;
  TestState(this.count);

  TestState copy() {
    return TestState(this.count);
  }
}

///bloc事件,抽象,用于扩展
abstract class TestEvent {}
///具体事件,加法
class InCreaseEvent extends TestEvent{}
  1. widget中这样监听bloc的状态变更,以及发送事件修改状态
class _TestBlocPageState extends State<TestBlocPage> {
  TestBloc _bloc;

  @override
  void initState() {
    _bloc = TestBloc(TestState(1));
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<TestBloc, TestState>(
      cubit: _bloc,
      builder: (context, state) {
        return Container(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              FlatButton(
                  onPressed: () {
                    ///发送加法事件
                    _bloc.add(InCreaseEvent());
                  },
                  child: Text('加1操作')),
              Text('${state.count}')
            ],
          ),
        );
      },
    );
  }
}
上一篇 下一篇

猜你喜欢

热点阅读