LVGL UI设计神器anyui之高阶组件

破炉而出——LVGL UI设计神器 anyui 之高阶组件

孙悟空吃了大量的巧克力豆后，在太上老君的炼丹炉中憋了七七四十九天，最终破炉而出，练就了火眼金睛，继七十二变和筋斗云之后第三大本领，省去了取经路上无数麻烦。试想如果没有孙悟空的火眼金睛，唐僧被抓走的次数得翻几番。可见，好的装备对于打怪效率的提高有多重要。

anyui 在炼了七七四十九天之后，练就的不是火眼金睛，而是另一个打BOSS（BOSS总是有很多需求）的高级装备——高阶组件。

什么是高阶组件？

在说高阶组件之前，先说什么是非高阶组件。

LVGL提供了40+的组件，从简单的按键到复杂点的图标仪表盘等。这些都可以视为非高阶组件，也就是基础组件，基础组件的功能受限于LVGL的能力。

尽管LVGL提供的基础组件很丰富，但每个组件提供的功能也比较单一。在实际项目中有很多场景需要的功能用基础组件实现却比较麻烦。

举个例子：

空调的触控面板都会有一个控制风量的按键（如果你说空调遥控器都是实体按键，嗯，那就麻烦直接划到文章底部点个赞就可以离开了图片），点击风量按键的时候档位会依次在“低、中、高、自动、低……”变化，每个档位会显示一个标签显示当前档位和一个表现风量大小的图标。这个场景很常见吧？其实类似的按键还有模式等。在其它产品上这样的状态按键也比比皆是。

例子说完了，用LVGL的基础组件怎么实现？有攻城狮笑了：这连编程狗都能做，有什么难的，弄个按键，弄个标签，弄个图片，在按键点击事件中设置图片标签，balabala……对于手撸LVGL C代码的大神，我不敢问这个问题，唯有献上膝盖，只是怕膝盖不够用。但如果是这样，那对一个LVGL界面设计软件来说，有点失职。

目前大多数LVGL界面设计软件是通过自定义代码让用户去自己实现的。是的，自定义代码很灵活，想干嘛就干嘛，因为这跟手撸代码没太大差别（可能还不如直接手撸）。但是不是可以有更好的办法？LVGL UI设计软件不就是为了提高界面设计效率而生的吗？

anyui 的解决方案是——高阶组件，也就是今天的主角。

高阶组件是什么？

高阶组件是一系列基础组件的组合，通过基础组件定义高阶组件的外观，同时在基础组件的基础上进行扩展，使其具备状态自管理的一种复合组件。对于使用者来说，它整体就是一个组件。

我们来看看几个高频场景下的高阶组件。

状态按键

针对以上空调的场景，anyui 提供了一个高阶组件——“状态按键”。状态按键可以配置1到N个状态，每个状态可以配置相应的图片和标签，点击按键的时候，会依次在从一个状态到下一个状态，同时，显示当前状态的图片和标签。状态按键的外观是由按键、图片、标签等这些基础组件去配置的，但行为是预定义好的。先看看一个状态按键长什么样：

以上展示的这个状态按键是圆形的，你也可以改成方形的，或者带圆角的方形，背景也可以改成其它颜色，标签文字大小，位置，颜色等都可以改。例如：

再来看看状态设置：

上面我们只设置了两个状态，你可以添加更多状态。改变“当前状态”可以看到每个状态对应的变化。

如果用户界面再更复杂点，不止一个图片或标签呢？没关系，右键这个高阶组件，选择“编辑”，进入高阶组件的编辑界面。有更多的隐藏组件可以打开。状态按键支持最多3个图片和3个标签。这些图片和标签如何安放呢？也是在编辑界面里调整他们的相对位置。

如果打开所有的图片和标签，状态按键变成这个样子：

对应的属性如下：

改变“当前状态”就可以看到相应的变化。

标签滑块

如果用户不喜欢按键的方式呢？可能滑动的方式去调整更受欢迎。拖动一个滑块，每个滑块刻度表示不同的风量，当前刻度还高亮显示，另外显示一个表现风量大小的图片。这也是一种非常常见的场景。

anyui 提供了一个“标签滑块”，同样支持多个状态，即对应滑块多个刻度，每个状态同样可以配置1-3个图片和1-3个标签。另外，当前刻度的标签样式可以配置。标签滑块长这个样子，拖动滑块可以看到不同状态下的变化。

滑块方向

滑块不一定都是垂向的，也可能是横向的，没关系，在高阶组件的编辑里，设置滑块宽度大于长度，滑块自动调整为横向。

对于标签滑块，外观的配置和组件的编辑同状态按键，这里不再赘述。

数值滑块

另一种常见的滑动控制只有一个标签，就显示在当前滑块的刻度上。像这样：

是的，这就是 anyui 提供的另一种高阶组件——数值滑块。跟标签滑块非常类似，同样支持1-3个图片和1-3个标签。状态配置，组件编辑等跟标签滑块一样。

以上看到的都不需要写一行的自定义代码，这就是高阶组件所提供的功能。

好了，以上是 anyui 目前推出的几个高阶组件，希望这些高阶组件能让大家更高效地开发应用，毕竟陪女朋友也需要时间，发呆也需要时间。

故事到这里并没有结束，只是待续…… anyui 会针对常见的场景继续推出更多的高阶组件。

总结

anyui 使用高阶组件极大地简化了一些高频场景的界面设计工作。

对于高阶组件，你可以：

• 定制外观

• 隐藏和显示内部的某些组件

• 选中、复制、删除和拖拽移动，和普通组件一样

不可以：

• 改变它的行为

• 增加、删除它的内部组件，或改变内部组件的次序

高阶组件官方介绍：

https://anyui.tech/docs/guide/hoc/intro

高阶组件微信公众号介绍

https://mp.weixin.qq.com/s/yicfKpBYsk1rkdENax25gg?token=1965018544&lang=zh_CN

​