三种架构在Flutter中的尝试

栏目: 后端 · 发布时间: 5年前

内容简介:​ 一个常见的"评价列表页",点击"评价列表页"中的任意一项跳转进入"评价详情页"。在"评价详情页"我们可以看到该评论完整的评价内容和评价大图,同时"评价列表页"和"评价详情页"都带有分享和点赞的功能。以评论中的点赞操作为例​ 以"评价列表页”为例,comment_list.dart实现了comment_list_iview.dart中的接口(如 onZanValueUpdate方法)而comment_list_presenter.dart实现了requestZan等异步方法。

​ 一个常见的"评价列表页",点击"评价列表页"中的任意一项跳转进入"评价详情页"。在"评价详情页"我们可以看到该评论完整的评价内容和评价大图,同时"评价列表页"和"评价详情页"都带有分享和点赞的功能。

MVC架构

架构视图

三种架构在Flutter中的尝试

工程结构

三种架构在Flutter中的尝试
  • 外层

    main.dart入口函数调起CommentApp.dart这个App的工程入口

  • widgets

    comment_list_item.dart和comment_widget_pub.dart是封装的两个视图组件,一个是列表的每一个item的样式,另一个是"评价详情页"和"评价列表页"的底部操作栏(点赞,分享)样式封装

  • screens

    comment_detail.dart和comment_list.dart对应我们的两个页面"评价详情页"和"评价列表页"

  • mvc

    MVC模式中的Control类和Model类

  • model

    comment_item_model.dart对应的是评价列表页每一个item背后的数据封装

搭建步骤

以评论中的点赞操作为例

三种架构在Flutter中的尝试
  • columnControl是comment_widget_pub.dart里面的一个方法,封装了一个底部操作栏的视图,包含了"点赞"和"分享"的功能。

  • 箭头处的Con().praise1方法被View的onTap事件触发,是非常常见的一种从View到Control建立连接的调用方式

三种架构在Flutter中的尝试
三种架构在Flutter中的尝试
  • Control与View建立连接的方式一般是将Control与State进行绑定,比如在Control进行初始化的时候传入,使得Control与每个页面的View变得一一对应。这里只是简单的把当前的state通过方法参数传入Control,接下去看Control类中praise2方法的实现.
三种架构在Flutter中的尝试
  • 在Control中调用State的setState方法起到一个当Model参数改变,View界面能够主动refresh的效果。
三种架构在Flutter中的尝试
三种架构在Flutter中的尝试
  • 可以直接通过Control类访问对应的Model,然后在Model 中做相应的数据上的处理,这样View与Model就建立了连接
三种架构在Flutter中的尝试
三种架构在Flutter中的尝试
  • 红色箭头处是一种非常普通的Control访问Model数据的方式,使得Control与Model建立连接
三种架构在Flutter中的尝试

MVP架构

架构视图

三种架构在Flutter中的尝试

工程结构

三种架构在Flutter中的尝试
  • 外层

    同上

  • widgets

    同上

  • screens

    同上

  • mvp

​ 以"评价列表页”为例,comment_list.dart实现了comment_list_iview.dart中的接口(如 onZanValueUpdate方法)而comment_list_presenter.dart实现了requestZan等异步方法。

  • model

    同上

搭建步骤

以评论中的点赞操作为例

三种架构在Flutter中的尝试
  • 在ListScreen中创建对应的Presenter对象同时发起请求列表数据的网络请求,这样View和Presenter就建立了连接。
三种架构在Flutter中的尝试
三种架构在Flutter中的尝试
  • 在CommentListPresenter中发起异步请求,这里用了assets下的资源文件读取做了应答数据的模拟,在请求成功后通过View之前实现的接口中的onListViewUpdate方法将结果返回给View进行渲染。
三种架构在Flutter中的尝试
三种架构在Flutter中的尝试
  • 在CommentListPresenter中还有一个成员变量是Model,在这里Presenter通过它对Model数据进行填充和更新的操作。
三种架构在Flutter中的尝试

Redux架构

架构视图

三种架构在Flutter中的尝试

工程结构

三种架构在Flutter中的尝试
  • 外层

    同上

  • actions

    定义了各种操作类型,可以认为是一个状态变更的代号:PraiseAction(点赞操作),ShareAction(分享操作),FetchListAction(取列表数据)等

  • screens

    同上

  • reducer

    actions包下定义了状态变更的代号,而reducer里面就是描述了具体的状态是如何进行变更的,一个reducer通常对应一个或多个action。

  • middleware

    middleware是在action触发后且reducer到达前被执行,这里主要是为了插入一个请求评价列表数据的异步方法。

  • model

    比之前多了一个app_state.dart,它是Store所存储的状态描述。


以上所述就是小编给大家介绍的《三种架构在Flutter中的尝试》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

iOS软件开发揭密

iOS软件开发揭密

虞斌 / 电子工业出版社 / 2011-5-1 / 79.00元

本书以严密的体系性提供了iPhone和iPad软件开发从入门到专家的系统性知识,并提供来源于真实项目的可重用商业代码。书中的每个实例都是项目经验的提炼,深入浅出地讲解iPhone和iPad软件开发的核心技术要点,基本涵盖了iOS软件开发在真实商业项目中所需要的所有主题,并将实例介绍的技术深度和超值的实用性结合在一起,成为本书的特色。 随书附赠的光盘中包含了书中大量案例的完整工程源代码,可以让......一起来看看 《iOS软件开发揭密》 这本书的介绍吧!

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具