Standard Layout Definitions — verticalLayout & accordionLayout

同学们，咱们今天来聊聊属性编辑器里的布局设计。其实核心就两种样式，理解了它们，你在设计组件属性面板时就会很得心应手。 先看最简单的，叫垂直布局，也就是vertical layout。你可以想象它就是一张清单，把你的属性按顺序从上到下直直地排下来。每个属性占一行，一目了然。当你的属性个数很少，而且彼此之间没啥明显的逻辑分组时，用这种平面列表的方式就非常合适，简简单单，不用搞复杂的分组。 另一种更灵活的叫手风琴布局，也就是accordion plan。它会把属性归类，放进一个个可折叠的扇区里，每个扇区都有一个标签。想编辑哪一类属性，就单独点开那一扇，其他的自动收起来。这样界面上不会一下子塞满所有字段，特别适合属性已经被你分了类、而且用户通常一次只修改一个类别的场景。比如把“外观设置”和“行为设置”分开，交互起来就很清爽。 这两种布局在底层都用到了同一个东西——propertyLayout子组件。你必须给每个propertyLayout绑定一个“property”属性，让它去引用模式定义里的具体子属性。这样布局才知道“这一行到底对应哪个字段”。 至于这个属性最终渲染成什么样的编辑控件呢？是文本框、下拉菜单还是开关按钮？主要看两个因素：一是该属性在模式里的默认类型，比如文本、布尔、数字等；另一个就是我们可以在editor.json里用componentOverrides去做定制覆盖，替掉默认的编辑器。所以整套机制既统一，又留着给你自定义的空间。 好，这一页我们就讲这么多。记住：属性少且平铺用垂直布局，属性分类多时用折叠手风琴，编辑器长相靠类型和覆盖来决定。下一节咱们继续深入实操。