Flutter在流式场景下的架构设计与应用

目前，闲鱼的主要业务场景都是基于流式场景构建的。在闲鱼的主要几个业务场景下存在两种类型的页面：一种是复杂交互的页面，如发布页面、商品详情页；另一种是轻交互、需要一定动态化能力满足千人千面的运营配置及快速A/B实验需求的页面，如首页、搜索页面、我的等页面。

在这些轻交互、动态化运营的页面场景下，有很多共通的处理逻辑：页面的布局、数据的管理、事件逻辑驱动的数据变化以及数据驱动的视图状态更新；这些工作往往大部分都是重复的工作，重复的代码逻辑。

在研发效能、交付效率方面，业务的变化往往依赖于版本发布，动辄两周的发版周期，对于需要快速投放和响应的业务来说，上线时间过长将难以接受。为了解决以上问题，在Flutter版本首页改版的契机下，闲鱼设计了一套流式场景下的页面搭建架构设计。

流式页面容器架构设计

在流式布局的架构设计过程中，面对实际的业务场景，通过以下几个方面解决端到端的流式页面容器设计：

1.在搭建平台侧，实现页面搭建、组件管理、协议编排等能力，与投放平台、A/B实验平台和监控平台打通；

2.在客户端侧，采用MVVM模型，设计通用的事件协议，抽象通用的页面布局、数据管理及事件处理的能力，减少重复的代码开发，提升研发效率。在页面布局管理方面，与列表容器PowerScrollView深度结合，实现高效的页面渲染、数据驱动的页面刷新能力；

3.使用阿里巴巴集团 DinamicX作为DSL实现动态模板渲染，满足投放以及运营需求；

4.在与服务端通信协议方面，闲鱼一直在实践Flutter+FaaS的云端一体化开发，借助FaaS的能力，定义一套云端一体化的事件协议，解决业务逻辑动态化的问题，减少发版依赖，进而提升交付效率。

在流式页面容器架构设计中，重点包括以下几个核心模块：协议层、事件中心和数据中心。下面介绍这几个模板的详细设计。

协议的设计

在页面容器协议的设计方面，在结合闲鱼业务以及阿里巴巴集团的一些技术方案后，闲鱼采用了三层协议的设计：Page、Section和Component。

1.Page层协议主要包含整个页面Sections信息，以及下拉刷新、上拉加载更多等配置信息；

2.Section层协议包含当前Section的布局信息、初始化Event、LoadMore Event及Components等信息；

3.Component层协议与具体业务相关，对于容器来说是黑盒的，具体如何渲染会交给业务方处理；默认提供DX解析渲染Handler。

在通信协议的设计上，全部采用事件传递的方式&#x