Malionic桌面端页面制作新技能近期马良迎来一波新功能上线，继续毫无保留的开源代码-抓紧时间起来和明星专注。新推出的功能包括桌面页面创建、“落地模式”、“原汁原味”布局组件（容器组件）开发能力、组件打包、word文档分析、psd分析等平台功能和能力。本文将通过一些具体的例子来介绍马良的桌面页面创建功能。SelectCanvasCanvas是马良新引入的一个概念，指的是场景区域中的一块区域，用于放置组件。画布的高度可以扩展，但是宽度不能扩展。渲染器的页面适配主要是不同宽度的canvas生成的页面在不同宽度的设备上的适配。因此，我们主要关注画布的宽度。引入canvas的概念后，马良搭建了4个canvas，其中3个是移动端canvas，剩下1个是桌面canvas。见下图。由于我们制作的是桌面版页面，所以首先我们点击选择最宽的画布指示条，切换到桌面版画布。这时候会询问你是否需要切换到“地板模式”。那么到底什么是落地模式呢？我们可以看到一个地板模式的简单例子。在属性面板中，可以设置某个组件的布局方式。布局模式决定了其直接子组件的位置和排列方式。当设置为“地板模式”时，子组件像地板一样依次向下展开。当设置为“自由模式”时，子组件上下堆叠，位置可以自由移动。在实践中，“落地模式”更适合桌面页面的制作。所以在将canvas切换为桌面画布时，如果根组件（root）的布局模式不是“floormode”，就会询问是否切换为floormode，也就是上一节的情况。自动设置“floormode”的组件的高度，由于其子组件是顺序向下排列的，我们可以禁用组件的高度（stylepanel-height-disable，该值实际设置为auto），这样组件可以根据子组件的累计高度自动获取高度。水平布局“落地模式”方便组件沿页面垂直布局，那么当组件需要水平排列时怎么办呢？多列布局组件在这里。页面结构桌面页面的内容组织通常是顶栏、内容区、页脚，也可能有一个或多个侧边栏。结合floor模式和多栏布局组件，我们可以轻松实现上面的各种页面结构。以上图左下角的页面结构为例，使用Maliang实现。点击查看演示视频，可以看到我们使用了“空容器”组件和“多列布局组件”，结合上面提到的“落地模式”垂直布局和“多列组件”。借助“高度自动化”技术，成功实现了包括侧边栏、顶部栏、主要内容区和页脚的页面布局。填充内容制作完页面骨架后，根据实际需要在页面各部分添加内容。由于专门为桌面画布开发的组件还比较少，所以在制作桌面页面时，需要灵活组合基本组件（如图片、文字、富文本等）来实现一些复杂的效果和功能。现在，马良团队正在加紧桌面组件的开发。随着这些封装更高、使用更方便的组件的面世，桌面页面的制作将大大加快。也希望广大读者能够参与到这个过程中，积极为马良组件商城贡献组件，一点点star就可以了。不同桌面设备的宽度存在差异，用于设备适配。在制作桌面页面时，需要考虑页面在不同设备上的实际显示效果。与移动端页面仅通过缩放视口即可实现设备适配不同，马良并未对桌面端页面采取任何主动适配策略。那么对于特定的页面，如何实现合适的展示效果呢？考虑到大部分桌面页面内容区域的宽度都是比较固定的，比如1140px、960px，所以制作这些内容时不需要特殊处理，直接使用绝对单位px（默认单位）即可.此外，内容区域通常居中。考虑到需求的广泛性，马良特地提供了一个“center”属性，让组件通过该属性实现自动动态居中的效果。对于依赖于设备宽度的组件展示效果，比如banner导航栏，不能再使用组件样式默认的绝对单位。您应该将大小和位置样式的单位切换为“%”并手动输入值。除了平台层面提供的绝对单位和相对单位适配方案外，组件本身也可以通过“媒体查询”等技术实现响应式，在不同宽度的设备上显示不同的形式。演示显示最后，“你必须先做这个，然后做这个，再做这个，最后做这个”，一个漂亮的演示页面就做好了。期待PC端的能力支持。我们也在尝试使用马良做数据大屏，我们发现马良平台在制作数据大屏方面有着得天独厚的优势。等我们相关的组件比较丰富的时候可以发一篇文章解释一下。以下是马良尝试做大屏的演示地址——点击查看效果。支持我们的开源项目需要不断的坚持，我们坚持的动力当然也来自于您的支持。过来，走之前加个关注
