【记录贴】我的 bmGui 框架（二）

kamikaze

这次，我想应该简要的介绍一下我的 bmGui 框架

bmGui 框架，其中 GuiElement（元素）是框架的基础，也是核心
同时也是 GuiWindow（窗口）、GuiWidget（部件）的父类

GuiWindow 分层窗口
简单来说，支持透明、异形、拉伸等等

GuiWidget 其他控件的父类
在我的初步设计中，所有的控件继承自 GuiWidget （已实现 按钮、单选框、多选框等等）

GuiElement 元素
因为 GuiWindow、GuiWidget 作为其子类，所以基本继承 GuiElement 所有属性和函数


一、盒子模型
每个元素都存在以下属性
1、X、Y 元素左上角的位置
2、Width、Height 元素的宽高
3、Margin（外边距）
4、BorderWidth（边框宽度）
5、Padding（内边距）
6、BorderRadius（边框圆角）
…
其中，Width、Height 分别支持设置 3 种值类型（GuiValue 类）
① Int 整数
② Percent 百分比，父元素的宽高百分比
③ FitContent 内容自适应，该元素尺寸由子元素决定

类比上古时代 MFC 和 经典 WebUI，内容自适应其实是一种非常好用且必要的尺寸策略


BorderRadius 支持设置 4 个角度、8 个半径，2 种值类型（GuiValue 类）
比如 topLeft.x、topLeft.y、topRight.x、topRight.y …
① Int 整数
② Percent 百分比，该元素的宽高百分比
比如该元素宽度为 300px，设置 BorderRadius.topLeft.x 为 50pct，在计算盒子模型时 topLeft.x = 150px


二、布局类型
在记录贴（一），我已经简要的介绍了布局类型
包括 Column（垂直布局）、Row（水平布局 ）、Box（类型安卓中的帧布局）



该布局方式参考自谷歌近年来新的 Compose 布局，并非我闭门造车，所以实用性应该很强
这里有个知识点，在 Column 和 Row 中，还有两个属性，分别是 MainAxis（主轴）和 CrossAxis（交叉轴，也可以理解为副轴）

不难想象，Column（垂直布局），其主轴纵向垂直，交叉轴（副轴）横向水平
Row（水平布局），其主轴横向水平，交叉轴（副轴）纵向垂直
具体为什么要区分 MainAxis（主轴）和 CrossAxis（交叉轴），后面我会讲解

Column 和 Row 两种布局方式，不支持设置 X、Y
简单来说，这两种布局方式，所有子元素按主轴或交叉轴对齐方式依次排列
因此 X、Y 是该框架自行计算的，所以此时 设置 X、Y 无效

Box 布局方式，不支持设置 Margin（外边距）
该布局方式，需要自行指定距离父元素的 X、Y，所以此时设置 Margin 无效（和 Web 所有区别）

再来说 MainAxis（主轴）和 CrossAxis（交叉轴）
MainAxis 支持 Start、Center、End、SpaceBetween、SpaceAround
CrossAxis 支持 Start、Center、End
具体样式，可自行了解
贴心传送门 Compose 中的流式布局  |  Android Developers (google.cn)

经过思考，我认为参考 Web 布局，还应该设计添加一种 Float 浮动布局，这个坑以后再填

三、阴影效果
每个元素都支持添加多个阴影，其属性与 Web 相似
包括 offsetX（横向偏移量）、offsetY（纵向偏移量）、blur（模糊半径）、color（阴影颜色）、isEraseObscuredPart（是否擦除被遮挡的部分）

因为 Window（窗口）继承自元素，所以窗口当然支持阴影
简单的看了一下，其他前辈的自研 UI框架，并没有深入研究（此话不负责~）
有的窗口阴影还是通过图片实现的，整体效果和逻辑肯定要稍差一些了

在阴影这个属性上，窗口做了一些特殊处理，不支持 offsetX（横向偏移量）、offsetY（纵向偏移量）
且仅支持添加一个阴影效果，为什么这样处理，这应该很容易理解吧~

再说一下 isEraseObscuredPart（是否擦除被遮挡的部分） 这个参数，当我们窗口或部件为半透明时，
如果不擦除阴影被该元素遮挡的部分，很影响视觉效果，但如果每个都擦除，又会造成不必要的开销，所以添加此参数

……

坐久了腰疼，有机会再和大家交流:噜阿噜

【记录贴】我的 bmGui 框架（一） - 核心用户服务 - 递归火山软件开发平台 - Powered by Discuz! (voldp.com)

kamikaze

留个沙发

拒绝吃鱼的猫

我i要学 我要学
我是e人
不是i人

kamikaze

拒绝吃鱼的猫 发表于 2024-9-2 02:13
我i要学 我要学
我是e人
不是i人

啥意思，这是

秋天的童话

牛逼的新GUI

xrea

啥时候发布来玩玩

秋天的童话

有原创的界面库，完善之后在语言上的语言又可以整个IDE出来了

kamikaze

秋天的童话 发表于 2024-9-2 21:10
有原创的界面库，完善之后在语言上的语言又可以整个IDE出来了

有兴趣我们可以一起研究

qjayfeng0

有兴趣我们可以一起研究

kamikaze

qjayfeng0 发表于 2024-9-3 09:14
有兴趣我们可以一起研究

QQ 89075309