LVGL Pro 使用指南 [10] LVGL XML 样式

概述 链接到标题

在 XML 文件中，可以同时使用全局样式（lv_style_t）和局部样式。

全局样式 链接到标题

全局样式用 <styles> 定义，其作用域为整个 XML 文件，global.xml中定义的全局样式可以在其他 XML 文件中引用。按照下面方式定义样式及其属性：

<style name="red"
    help="What is this style about?"
    border_width="2px"
    border_color="0xff0000"/>

在 <view> 中可以通过如下方式引用样式：

<view>
    <lv_slider value="20">
        <style name="main"/>
        <style name="red" selector="knob"/>
        <style name="blue" selector="knob|focused"/>
    </lv_slider>
</view>

如示例所示，可以使用 selector 让样式用于只对控件的特定部分（parts: knob）或特定状态（states: focused）生效。

全局样式绑定（Style binding） 链接到标题

除直接将样式添加到 UI 元素立即生效外，还可以在 Subject 的值等于某个参考值时 条件性地添加样式并生效。这种在运行时生效的方式非常适合根据条件改变 UI 元素的外观，和调整布局。

例如浅色/深色主题切换，实现的主要步骤是：

  • 建立一个 Subject，例如 dark_theme_on
  • 使用 <style> 标签，其中添加一些默认样式
  • 根据深色主题需要的颜色定义另一个深色样式
  • 使用bind_style元素为组件绑定样式

示例如下

<component>
    <styles>
        <style name="style_base" bg_color="0xeee" text_color="0x111" radius="20" />
        <style name="style_dark" bg_color="0x333" text_color="0xeee" radius="20" />
    </styles>

    <view extends="lv_button">
        <style name="style_base" />
        <bind_style name="style_dark" subject="dark_theme_on" ref_value="1"/>
        <lv_label text="Apply"/>
    </view>
</component>

说明

  • <style name="style_base" />：基础样式，默认应用
  • <bind_style name="style_dark" subject="dark_theme_on" ref_value="1"/>：当 dark_theme_on 的值为 1 时，动态应用 style_dark

下面是一个演示：

style

局部样式 (Local Styles) 链接到标题

所谓局部样式，就是不使用<style>，直接对用样式属性直接对控件或者组件的样式进行修改，例如 链接到标题 

<lv_label style_bg_opa="200" style_bg_color="0x123456"/>

局部样式绑定 链接到标题

除了直接设置局部样式属性外，也可以把样式属性绑定到 Subject 的值上

<component>
   <view extends="lv_slider">
        <bind_style_prop prop="bg_opa" selector="knob|pressed" subject="slider_knob_opa" />
   </view>
</component>

渐变（Gradients） 链接到标题

使用 <gradients> 标签来描述各种渐变，这些渐变随后可以在后续样式中引用。

例如创建渐变后 grad1 后，可以通过名称引用：<style bg_grad="grad1"/>或<lv_button style_bg_grad="grad1"/>

注意：当前版本的 LVGL Pro 的 Editor 并不支持渐变，因此渐变无法在 Editor 中直接使用导出C代码。只能写到XML中，运行时直接使用XML。

水平或垂直渐变（Horizontal or Vertical Gradient） 链接到标题

定义 <horizontal> 或 <vertical> 渐变：

<gradients>
    <horizontal name="grad1">
        <stop color="#ff0000" offset="20%" opa="40%"/>
        <stop color="#00ff00" offset="128" opa="100%"/>
    </horizontal>
</gradients>

线性渐变（Linear Gradient） 链接到标题

定义从两点之间的倾斜渐变：

<gradients>
    <linear name="grad1" start="50 50" end="100 80">
        <stop color="#ff0000" offset="20%" opa="100%"/>
        <stop color="#00ff00" offset="240" opa="100%"/>
    </linear>
</gradients>

径向渐变（Radial Gradient） 链接到标题

定义径向渐变：

<gradients>
    <radial name="grad1" center="100 50%" edge="200 50" focal_center="50 80%" focal_edge="55 80%">
        <stop color="#ff0000" opa="100%"/>
        <stop color="#00ff00" opa="100%"/>
    </radial>
</gradients>

锥形渐变（Conical Gradient） 链接到标题

定义锥形渐变：

<gradients>
    <conical name="grad1" center="80 50%" angle="45 270">
        <stop color="#ff0000" opa="100%"/>
        <stop color="#00ff00" opa="100%"/>
    </conical>
</gradients>

参考 链接到标题

https://docs.lvgl.io/master/details/xml/ui_elements/styles.html#local-style-binding