GUI

背景知识说明 当我尝试学习一个新的GUI框架的时候，我首先会关注其如何进行页面布局与多文件构建，这篇简单的文章主要与大家一起完成布局系统的学习。 当我们在讨论一个布局系统的时候，我们在讨论什么东西？ 如何描述不同的组件之间的相对（绝对）位置约束？ 如何描述组件自身的位置属性？ 如何描述子组件？ 上面的图片描述了一个UI框架应该具备的功能： 通过margin描述外部边距 通过border描述边框 通过padding描述内边距 以上三点也是盒模型基本的功能，除了盒模型，另外一个重要的话题是组件的布局。所谓的布局就是描述组件之间的位置关系，通过相对位置或者绝对位置 描述不同的组件应该怎么排列。 为什么布局系统非常的重要？我们可以假设我们有一个框架，没有任何的布局方面的特性，那么我们的代码看上去就像是 ComponentA {x:0,y:100} ComponentB {x:50,y:0} ComponentC {x:200,y:200} 这样其实就是绝对布局，然后的子元素全部相对父元素进行布局，这样会造成应用编写异常的困难，也不具备跨设备的适配性。 Makepad 中的盒模型 这一部分其实没有什么特别要说明，我们直接上代码即可 live_design! { <View> { width: Fill, height:60, padding: { top: 20, left:0, right:0, bottom:20 }, margin: { left:20 right:20 top:20, bottom:20 }, show_bg: true, show_bg: true, flow: Down, draw_bg: { color: #222222, radius: vec2(5, 4.5) } } } 上面的代码将得到下面的效果，这里与HTML基本一样，因此盒模型部分与主流框架基本一样，不会有任何理解上的困难。 这里我们需要注意的是，上面没有讨论边框，尤其是常见的边框圆角，那么在makepad中应该如何实现圆角嘞？ live_design! { <RoundedAllView> { width: Fill, height:60, padding: { top: 20, left:0, right:0, bottom:20 }, margin: { left:20 right:20 top:20, bottom:20 }, show_bg: true, show_bg: true, flow: Down, draw_bg: { instance radius: vec4(10.