用户界面使用bloc解偶

用户页面示例

简而言之，业务逻辑需要：
1.转移到一个或几个BLoC，
2.尽可能从表示层中删除。换句话说，UI组件应该只关心UI本身而不关心业务，
3.依赖Streams 使用输入流（Sink）和输出流（Stream），
4.保持平台独立，
5.保持环境独立。
事实上，BLoC模式最初被设想为允许独立于平台重用相同的代码：Web应用程序，移动应用程序，后端。

block流程图

• 组件通过Sink向BLoC 发送事件，
• BLoC通过流通知组件，
• 由BLoC实现的业务逻辑不是他们关注的问题。

从这个声明中，我们可以直接看到一个巨大的好处。

业务逻辑与UI的分离：

• 我们可以随时更改业务逻辑，对应用程序的影响最小，
• 我们可能会更改UI而不会对业务逻辑产生任何影响，
• 现在，测试业务逻辑变得更加容易。

通用BlocProvider

import 'package:flutter/material.dart';

abstract class BlocBase {
  void dispose();
}

class BlocProvider<T extends BlocBase> extends StatefulWidget {
  BlocProvider({
    Key key,
    @required this.child,
    @required this.bloc,
  }): super(key: key);

  final T bloc;
  final Widget child;

  @override
  _BlocProviderState<T> createState() => _BlocProviderState<T>();

  static T of<T extends BlocBase>(BuildContext context){
    final type = _typeOf<BlocProvider<T>>();
    BlocProvider<T> provider = context.ancestorWidgetOfExactType(type);
    return provider.bloc;
  }

  static Type _typeOf<T>() => T;
}

class _BlocProviderState<T> extends State<BlocProvider<BlocBase>>{
  @override
  void dispose(){
    widget.bloc.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context){
    return widget.child;
  }
}

UserBloc

import 'dart:async';

import 'package:flutter_bbs_client/model/userEntity.dart';
import 'package:flutter_bbs_client/service/api.dart';
import 'package:flutter_bbs_client/widgets/bloc_provider.dart';

class UserBloc extends BlocBase{

  UserEntity _userEntity;

  StreamController<UserEntity> _userController = StreamController<UserEntity>.broadcast();

  Sink<UserEntity> get _inUser => _userController.sink;
  Stream<UserEntity> get outUser => _userController.stream;

  StreamController<String> _refreshController = StreamController<String>.broadcast();
  Sink<String> get refreshUser => _refreshController.sink;

  UserBloc(){
    getUserInfo().then((userEntity){
      _userEntity= userEntity;
      _inUser.add(userEntity);
    });

    _refreshController.stream.listen((name){
      getUserInfo().then((userEntity){
        _userEntity= userEntity;
        _userEntity.attention = _userEntity.attention+1;
        _inUser.add(userEntity);
      });
    });

  }


  @override
  void dispose() {
    _userController.close();
    _refreshController.close();
  }

}

用户模型

class UserEntity {
    /// 粉丝
    double fan;
    /// 积分
    double integral;
    /// 名称
    String name;
    /// 关注
    double attention;
    /// id
    double id;
    /// 文章
    double article;

    String imageUrl;

    UserEntity({this.fan, this.integral, this.name, this.attention, this.id, this.article, this.imageUrl});

    UserEntity.empty(){
        this.fan = 0;
        this.integral = 0;
        this.name = '';
        this.attention = 0;
        this.id = 0;
        this.article = 0;
        this.imageUrl = 'images/default_avatar.jpg';
    }

    UserEntity.fromJson(Map<String, dynamic> json) {
        fan = json['fan'];
        integral = json['integral'];
        name = json['name'];
        attention = json['attention'];
        id = json['id'];
        article = json['article'];
        imageUrl = json['imageUrl'];
    }

    Map<String, dynamic> toJson() {
        final Map<String, dynamic> data = new Map<String, dynamic>();
        data['fan'] = this.fan;
        data['integral'] = this.integral;
        data['name'] = this.name;
        data['attention'] = this.attention;
        data['id'] = this.id;
        data['article'] = this.article;
        data['imageUrl'] = this.imageUrl;
        return data;
    }
}

个人中心页面

import 'package:flutter/material.dart';
import 'package:flutter_bbs_client/bloc/user_bloc.dart';
import 'package:flutter_bbs_client/pages/person_bloc_page.dart';
import 'package:flutter_bbs_client/widgets/bloc_provider.dart';
import 'package:flutter/cupertino.dart';

/// 个人中心页面
class PersonPage extends StatefulWidget {
  @override
  PersonPageState createState() => new PersonPageState();
}

class PersonPageState extends State<PersonPage> {


  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      backgroundColor: Colors.white10,
      body: BlocProvider<UserBloc>(
        child:  PersonBlocPage(),
        bloc: UserBloc(),
      )
    );
  }



  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
  }

  @override
  void didUpdateWidget(PersonPage oldWidget) {
    // TODO: implement didUpdateWidget
    super.didUpdateWidget(oldWidget);
  }

  @override
  void didChangeDependencies() {
    // TODO: implement didChangeDependencies
    super.didChangeDependencies();
  }
}

个人中心 PersonBlocPage

import 'package:flutter/material.dart';
import 'package:flutter_bbs_client/bloc/user_bloc.dart';
import 'package:flutter_bbs_client/model/userEntity.dart';
import 'package:flutter_bbs_client/pages/home.dart';
import 'package:flutter_bbs_client/widgets/bloc_provider.dart';
import 'package:flutter_bbs_client/widgets/divider.dart';
import 'package:flutter_bbs_client/widgets/group.dart';
import 'package:flutter_bbs_client/widgets/item.dart';

class PersonBlocPage extends StatefulWidget {
  @override
  PersonBlocPageState createState() => new PersonBlocPageState();
}

class PersonBlocPageState extends State<PersonBlocPage> {

  Future<Null> _refresh(UserBloc userBloc) async {
    userBloc.refreshUser.add('refresh');
  }

  @override
  Widget build(BuildContext context) {
    final UserBloc userBloc = BlocProvider.of<UserBloc>(context);
    return RefreshIndicator(
        onRefresh: () =>_refresh(userBloc),
        child: StreamBuilder<UserEntity>(
            stream: userBloc.outUser,
            builder:
                (BuildContext context, AsyncSnapshot<UserEntity> snapshot) {
              if(!snapshot.hasData) {
                return Center(
                  child: Container(
                    child: CircularProgressIndicator(),
                  ),
                );
              }
              return ListView(
                children: [
                  _head(snapshot.data),
                  Center(child: _card(context)),
                  Center(
                    child: Padding(
                      padding: const EdgeInsets.only(left: 15, right: 15.0),
                      child: SettingsGroup(<Widget>[
                        SettingsItem(
                          label: 'FS会员',
                          iconAssetLabel: 'huiyuan',
                          type: SettingsItemType.modal,
                          hasDetails: true,
                          onPress: () => Navigator.push(
                                context,
                                MaterialPageRoute(
                                    builder: (context) => HomePage()),
                              ),
                        ),
                        SettingsItem(
                          label: 'FS活动',
                          iconAssetLabel: 'huodong',
                          type: SettingsItemType.modal,
                          hasDetails: true,
                        ),
                        SettingsItem(
                          label: '浏览历史',
                          iconAssetLabel: 'liulanlishi',
                          type: SettingsItemType.modal,
                          hasDetails: true,
                        ),
                        SettingsItem(
                          label: '我的钱包',
                          iconAssetLabel: 'qianbao',
                          type: SettingsItemType.modal,
                          hasDetails: true,
                        ),
                      ]),
                    ),
                  )
                ],
              );
            }));
  }


  Widget _card(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(left: 10.0, right: 10.0, top: 10.0),
      child: Card(
        color: Colors.white,
        elevation: 0.5,
        child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Column(
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text('FS钻石:88'),
                  ],
                ),
                SizedBox(
                  height: 5.0,
                ),
                CustomDivider(
                  height: 1.0,
                ),
                SizedBox(
                  height: 15.0,
                ),
                Row(
                  children: [
                    _cardItem('article', '我对文章', '1篇私密', context),
                    _cardItem('tushu', '我的书架', '含已购', context),
                    _cardItem('shoucang', '我的收藏', '', context),
                    _cardItem('jianglibang', '奖励任务', '领FB钻', context),
                  ],
                )
              ],
            )),
      ),
    );
  }

  Widget _cardItem(
      String img, String title, String subTitle, BuildContext context) {
    return Expanded(
      flex: 1,
      child: Center(
        child: Column(
          children: [
            Image.asset(
              'images/$img.png',
              width: 35.0,
            ),
            SizedBox(
              height: 5.0,
            ),
            Text(
              '$title',
              style: TextStyle(fontSize: 15.0),
            ),
            SizedBox(
              height: 3.0,
            ),
            Text(
              '$subTitle',
              style: TextStyle(fontSize: 10.0),
            )
          ],
        ),
      ),
    );
  }

  Widget _head(UserEntity uerEntity) {
    return Padding(
      padding: const EdgeInsets.only(top: 15.0),
      child: Row(
        children: [
          Padding(
            padding: const EdgeInsets.only(left: 15.0, right: 15.0),
            child: Container(
              width: 60,
              height: 60,
              child: CircleAvatar(
                backgroundImage: ExactAssetImage('${uerEntity.imageUrl}'),
              ),
            ),
          ),
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Text(
                '${uerEntity.name}',
                style: TextStyle(fontSize: 20.0),
              ),
              Row(
                children: [
                  _headFooter(uerEntity.attention, '关注'),
                  SizedBox(
                    width: 30.0,
                  ),
                  _headFooter(uerEntity.fan, '粉丝'),
                  SizedBox(
                    width: 30.0,
                  ),
                  _headFooter(uerEntity.integral, '积分'),
                ],
              )
            ],
          )
        ],
      ),
    );
  }

  Widget _headFooter(num, title) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text('$num'),
        Text('$title'),
      ],
    );
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
  }

  @override
  void didUpdateWidget(PersonBlocPage oldWidget) {
    // TODO: implement didUpdateWidget
    super.didUpdateWidget(oldWidget);
  }

  @override
  void didChangeDependencies() {
    // TODO: implement didChangeDependencies
    super.didChangeDependencies();
  }
}

以上代码可供参考 从项目中提取 并不全 希望可以帮到各位道友，你也可以加入qq群向我提问，若帮到你希望你能给予支持或评论 我尽快回复你的问题

加入QQ群950676175 FlutterBBS群二维码.png