三种架构在Flutter中的尝试

场景说明

动图展示

功能简介

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

MVC架构

架构视图

工程结构

• 外层

  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背后的数据封装

搭建步骤

以评论中的点赞操作为例

• columnControl是comment_widget_pub.dart里面的一个方法，封装了一个底部操作栏的视图，包含了"点赞"和"分享"的功能。

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

  <