fish-redux(三)：Component

今天通过一个实例讲解一下Component的使用。下面完成下图的个人信息界面。该界面分为基本信息界面和工作信息界面。两块信息通过两个不同的网络请求获取的，工作信息块可以点击右边的按钮来展开或收缩详情，点击右下角可刷新基本信息界面。

捕获.PNG

1. 不使用component的实现

  • 新建info_page文件夹，实现page
class InfoPage extends Page<PageState, Map<String, dynamic>> {
  InfoPage() :super(
    initState: initState,
    effect: buildEffect(),
    view: buildView,
    reducer: buildReducer(),
  );
}

接下来添加state，action，effect，view，reducer文件

  • state.dart
class PageState implements Cloneable<PageState> {

  String avatar;
  String name;
  int age;

  String company;
  String job;
  String detail;

  PageState();

  @override
  PageState clone() {
    return PageState()..avatar = avatar
    ..name = name
      ..age = age
      ..company = company
      ..job = job
      ..detail = detail
    ;
  }

}

PageState initState(Map<String, dynamic> params) {
  return PageState();
}
  • action.dart
enum PageAction {
updateBase, //更新基本信息
updateJob, //更新工作信息
onRefresh //刷新事件
}

class PageActionCreator {

  static Action updateBaseAction(String avatar, String name, int age) {
    return Action(
      PageAction.updateBase,
      payload: <String, dynamic>{'avatar': avatar, 'name': name, 'age': age},
    );
  }

  static Action updateJobAction(String company, String job, String detail) {
    return Action(
      PageAction.updateJob,
      payload: <String, dynamic>{'company': company, 'job': job, 'detail': detail},
    );
  }

  static Action onRefreshAction() {
    return Action(
      PageAction.onRefresh,
    );
  }

}
  • view.dart
Widget buildView(PageState state,  dispatch, ViewService viewService) {
  print('_buildView');
  return Scaffold(
    appBar: AppBar(title: Text('个人信息'),),

    body: Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
        Card(
          margin: EdgeInsets.all(15),
          child: Padding(
            padding: EdgeInsets.all(20),
            child: Row(
              children: <Widget>[
                FadeInImage.assetNetwork(
                  placeholder: 'images/timg.jpg',
                  image: state.avatar ?? '',
                  height: 60,
                  width: 60,
                ),
                Padding(
                  padding: EdgeInsets.only(left: 30),
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Text(state.name ?? ''),
                      Padding(
                        padding: EdgeInsets.only(top: 10),
                        child: Text(state.age == null ? '' : state.age.toString()),
                      )
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),

        Card(
          margin: EdgeInsets.all(15),
          child: Padding(
            padding: EdgeInsets.all(20),
            child: MyExpand(
              <Widget>[
                Text('公司：${state.company}'),
                Padding(
                  padding: EdgeInsets.only(top: 10),
                  child: Text('职位：${state.job}'),
                ),
                Padding(
                  padding: EdgeInsets.only(top: 10),
                  child: Text('详情：${state.detail}'),
                )
              ],
            ),
          ),
        ),

      ],
    ),

    floatingActionButton: FloatingActionButton(
        child: Icon(Icons.refresh),
        onPressed: (){
          dispatch(PageActionCreator.onRefreshAction());
        }
        ),
  );
}
  • 这里MyExpand 是我们自定义的一个可收缩伸展的控件
import 'package:flutter/material.dart';

class MyExpand extends StatefulWidget {

  final List<Widget> widgets;

//  MyExpand(this.widgets):super(){
//    assert(widgets != null && widgets.length > 2);
//  };

  MyExpand(this.widgets);

  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return MyExpandState();
  }
}

class MyExpandState extends State<MyExpand> {

  bool expand = false;
  List<Widget> widgets = <Widget>[];

  @override
  void initState() {
    super.initState();
//    widgets = widget.widgets;
  }

  @override
  Widget build(BuildContext context) {
    if(expand == true) {
      widgets.clear();
      widgets.addAll(widget.widgets);
    } else {
      widgets.clear();
      widgets.add(widget.widgets[0]);
      widgets.add(widget.widgets[1]);
    }
    return Stack(
      children: <Widget>[
        Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: widgets,
        ),
        Align(
          alignment: Alignment.topRight,
          child: IconButton(
            icon: Icon(expand == true ? Icons.keyboard_arrow_up : Icons.keyboard_arrow_down),
            onPressed: () {
              setState(() {
                expand = !expand;
              });
            },
          ),
        ),

      ],
    );
  }

}
  • effect.dart
Effect<PageState> buildEffect() {
  return combineEffects(<Object, Effect<PageState>>{
    Lifecycle.initState: _init,
    PageAction.onRefresh: _onRefresh,
  });
}


void _init(Action action, Context<PageState> ctx) {
  println("Effect: _init");

  _getBaseInfo().then((_){
    ctx.dispatch(PageActionCreator.updateBaseAction(_.avatar, _.name, _.age));
  });

  _getJobInfo().then((_){
    ctx.dispatch(PageActionCreator.updateJobAction(_.company, _.job, _.detail));
  });


}

Future<BaseInfo> _getBaseInfo() async { //模拟通过网络获取基本信息
  return BaseInfo('http://b-ssl.duitang.com/uploads/item/201510/08/20151008192345_uPC5U.jpeg', '小恐龙', 24);
}

Future<JobInfo> _getJobInfo() async { //模拟通过网络获取工作信息
  return JobInfo('xxx传媒有限公司', '设计师', 'woshixiangqing');
}

void _onRefresh(Action action, Context<PageState> ctx) {
  _getBaseInfo().then((_){
    ctx.dispatch(PageActionCreator.updateBaseAction(_.avatar, _.name, _.age));
  });
}
  • 添加两个model类
class BaseInfo {
  String avatar;
  String name;
  int age;
  BaseInfo(this.avatar, this.name, this.age);
}

class JobInfo {
  String company;
  String job;
  String detail;
  JobInfo(this.company, this.job, this.detail);
}

实现效果如下


2. 使用component的实现

下面使用Component进行改造

2.1 改造基本信息

2.1.1 添加BaseComponent

在info_page 文件夹下面添加base_component文件夹，由于基本信息块只显示信息没有动作事件，只需添加state, component, view三个文件

  • Component与Page类似，实际上Page是Component的子类
class BaseComponent extends Component<BaseState> {

  BaseComponent():super(
    view: buildView,
  );
}
  • BaseState只有头像，名称，年龄三个属性
class BaseState implements Cloneable<BaseState> {

  String avatar;
  String name;
  int age;

  BaseState();

  @override
  BaseState clone() {
    return BaseState()..avatar = avatar
    ..name = name
      ..age = age
    ;
  }

}


BaseState initState(Map<String, dynamic> params) {
  return BaseState();
}
  • view从Page的view中抽取
Widget buildView(
  BaseState state,
  Dispatch dispatch,
  ViewService viewService,
) {
  return Card(
    margin: EdgeInsets.all(15),
    child: Padding(
      padding: EdgeInsets.all(20),
      child: Row(
        children: <Widget>[
          FadeInImage.assetNetwork(
            placeholder: 'images/timg.jpg',
            image: state.avatar ?? '',
            height: 60,
            width: 60,
          ),
          Padding(
            padding: EdgeInsets.only(left: 30),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text(state.name ?? ''),
                Padding(
                  padding: EdgeInsets.only(top: 10),
                  child: Text(state.age == null ? '' : state.age.toString()),
                )
              ],
            ),
          ),
        ],
      ),
    ),
  );
}

2.1.2 实现BaseComponent与Page的连接

在info_page下的state文件实现BaseConnector，BaseConnector继承自ConnOp，复写get和set方法，get方法数据从page传到Component，set方法数据从Component传到page。

class BaseConnector extends ConnOp<PageState, BaseState> {
  @override
  BaseState get(PageState page) {
    final BaseState sub = BaseState();
    sub.avatar = page.avatar;
    sub.name = page.name;
    sub.age = page.age;
    return sub;
  }

  @override
  void set(PageState page, BaseState sub) {
    page.avatar = sub.avatar;
    page.name = sub.name;
    page.age = sub.age;
  }
}

在info_page的page文件下添加dependencies

class InfoPage extends Page<PageState, Map<String, dynamic>> {
  InfoPage() :super(
    initState: initState,
    effect: buildEffect(),
    view: buildView,
    reducer: buildReducer(),
    dependencies: Dependencies<PageState>(
        slots: <String, Dependent<PageState>>{
          'base': BaseConnector() + BaseComponent()
        }),
  );
}

在info_page的view文件下，将刚刚基本信息块用下面的代码代替

viewService.buildComponent('base'),

重启应用，效果还是和原来一样

2.2 改造工作信息块

与2.1基本相同
未完待续...

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 206,839评论 6赞 482
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 88,543评论 2赞 382
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 153,116评论 0赞 344
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 55,371评论 1赞 279
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 64,384评论 5赞 374
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,111评论 1赞 285
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,416评论 3赞 400
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,053评论 0赞 259
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,558评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,007评论 2赞 325
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,117评论 1赞 334
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,756评论 4赞 324
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,324评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,315评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,539评论 1赞 262
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,578评论 2赞 355
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,877评论 2赞 345