可视化界面编辑器设计
本文转载于: 猿2048 网站→ https://www.mk2048.com/blog/blog.php?id=h2abia01ib 一 设计理念 界面、编辑器、播放器 界面是一棵组件树。 界面编辑器就是对这棵组件树进行编辑和持久化的工具。 编辑器维护这颗树的数据，对外开放增删改查，撤销重做等接口。 界面播放器输入组件树，可以得到界面展示 未来甚至可以做到通过不同的播放器来适配不同的平台。 组件 树上的每一个组件通过输入 属性 决定自己的 展示 交互 组件可以通过组件编辑器的接口知晓是否处于编辑状态。 编辑状态下，组件可以提供交互编辑自己的输入属性。 这么做有两点好处 编辑器关注的始终只有组件树，组件的属性，无需关注如何编辑组件属性 组件可以为自己的业务需要，量身定做最适合的交互来编辑属性 例：设计一个 Text 组件逻辑 当处在编辑状态下，显示光标，文字为可编辑状态 不处于编辑状态，则显示文本内容 Strikingly 正是实践该理念的优秀产品[www.sxl.cn] 视图组件 进一步，我们可以利用组件可以在编辑状态下，提供自己的交互逻辑编辑自身属性这一特性，我们可以设计出一个特殊组件—视图组件。 视图组件 本质就是组件。只不过视图组件的属性是组件列表。 可以在视图组件中可视化增加、删除、调整组件的顺序，通过视图组件，我们获得了编排组件的能力。