【LVGL(3)】设置对象大小、位置、盒子模型、状态

喜暖知寒

已于 2022-06-26 14:55:36 修改

阅读量1w

点赞数 9

分类专栏： LVGL 文章标签：单片机 LVGL GUI

于 2022-06-12 21:45:33 首次发布

本文链接：https://blog.csdn.net/qq_41650023/article/details/125247458

版权

LVGL 专栏收录该内容

13 篇文章 28 订阅

订阅专栏

终于开始学习创建对象啦 ~

😃 看起来建立一个个小对象没那么难啊！！

LVGL文档：Welcome to the documentation of LVGL! — LVGL documentationhttps://docs.lvgl.io/master/index.html

设置基础对象的大小

分别设置宽、高

void demo(void)
{
    lv_obj_t * obj = lv_obj_create(lv_scr_act());    //创建屏幕基础对象 
    lv_obj_set_width(obj, 300);                      //设置宽
    lv_obj_set_height(obj, 500);                     //设置高
}

同时设置宽高

void demo(void)
{
    lv_obj_t * obj = lv_obj_create(lv_scr_act());
    lv_obj_set_size(obj,300, 500);   // 宽度&高度
}

设置基础对象的位置

位置是相对于屏幕来说的。用平面坐标就行了。

LVGL屏幕坐标系为“LCD坐标系”。基本所有的都是这样。原点在屏幕左上角。

这样一来，屏幕就变成了这样。

设置时，不要超过屏幕大小！！会跑出显示屏！

位置(Position)

分别设置x轴、y轴

void demo(void)
{
    lv_obj_t * obj = lv_obj_create(lv_scr_act());
    lv_obj_set_x(obj, 200);
    lv_obj_set_y(obj, 50);
}

同时设置x轴、y轴

void demo(void)
{
    lv_obj_t * obj = lv_obj_create(lv_scr_act());
    lv_obj_set_pos(obj, 200, 50);
}

对齐(Alignment)

参照父对象对齐

void demo(void)
{
    lv_obj_t * obj = lv_obj_create(lv_scr_act());
    lv_obj_set_align(obj, LV_ALIGN_CENTER);    //居中
}

参照父对象对齐后再偏移坐标

void demo(void)
{
    lv_obj_t * obj = lv_obj_create(lv_scr_act());
    lv_obj_align(obj, LV_ALIGN_CENTER, 100, 100);
}

参照另一个对象(无父子关系)对齐后设置坐标位置

void demo(void)
{
    lv_obj_t * obj = lv_obj_create(lv_scr_act());

    lv_obj_t * label = lv_label_create(lv_scr_act());    //创建了label对象
    lv_label_set_text(label, "Hello, LVGL!");

    lv_obj_align_to(label, obj, LV_ALIGN_CENTER, 0, 0);
}

显示效果：

所有的对齐方式：LV_ALIGN_XXXXXX 的格式

LVGL对象的盒子模型

以官方mode为例：

屏幕相当于一个盒子，就算是对象超过了盒子的显示大小，也可以移动盒子视图来显示图像。

屏幕就是大盒子，里面就算一个一个的小盒子，然后一个盒子套一个盒子（套娃）

盒子模型(组成)

盒子本体就是Border黄色内的部分

对象是遵循盒子模型的

LVGL是参考CSS盒子模型的

边界(bounding)：元素的宽度/高度围起来的区域(整个盒子)。
边框(border)：边框有大小和颜色等属性(相当于盒子的厚度和它的颜色)。
填充(padding)：对象两侧与其子对象之间的空间(盒子的填充物)。
内容(content)：如果边界框按边框宽度和填充的大小缩小，则显示其大小的内容区域(盒子实际装东西的区域)。
轮廓(outline) ：LVGL中没有外边距(margin)的概念(盒子之间的距离)，确认代之的是轮廓(outline)。它是绘制于元素(盒子)周围的一条线，它不占据空间，位于边框边缘的外围，可起到突出元素(盒子)的作用。在浏览器里，当鼠标点击或使用Tab键让一个选项或者一个图片获得焦点的时候，这个元素就会多了一个轮廓框围绕。轮廓(outline) 。

LVGL的盒子模型是我们理解对象(部件)的组成，修改对象的样式，实现对对象的布局、处理对象排列等等的关键。

CSS盒子模型

网页设计中常听的属性名：内容(content)、内边距(padding)、边框(border)、外边距(margin)， CSS盒子模式都具备这些属性。这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也就是能装东西的一种箱子，也具有这些属性，所以叫它盒子模型。CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。

content就是盒子里装的东西，它有高度（height）和宽度（width）,可以是图片，可以是文字或者小盒子嵌套，在现实中，内容不能大于盒子，内容大于盒子就会撑破盒子，在LVGL中盒子不会变化，会产生滚动条，我们可以滚动查看超出盒子的内容；但在css中，盒子有弹性的，顶多内容太大就会撑大盒子，但是不会损害盒子。
padding即是填充，就好像我们为了保证盒子里的东西不损坏，填充了一些东西，比如泡沫或者塑料薄膜，填充物有大有小，有软有硬，反应在网页中就是padding的大小了。
border就是再外一层的边框，因为边框有大小和颜色的属性，相当于盒子的厚度和它的颜色或者材料。
margin外边距，就是我们的盒子与其他的盒子或者其他东西的距离。假如有很多盒子，margin就是盒子之间直接的距离，可以通风，也美观同时方便取出。

基础对象的样式

样式非常重要！有利益交互。

样式存储在 lv_style_t 变量中。样式变量应该是静态、全局或动态分配的。也就是它们不能是函数中的局部变量，因为当函数结束时它们会被销毁。

/**
 * A common type to handle all the property types in the same way.
 */
typedef union {
    int32_t num;         /**< Number integer number (opacity, enums, booleans or "normal" numbers)*/
    const void * ptr;    /**< Constant pointers  (font, cone text, etc)*/
    lv_color_t color;    /**< Colors*/
} lv_style_value_t;

/**
 * Descriptor of a constant style property.
 */
typedef struct {
    lv_style_prop_t prop;
    lv_style_value_t value;
} lv_style_const_prop_t;

/**
 * Descriptor of a style (a collection of properties and values).
 */
typedef struct {

#if LV_USE_ASSERT_STYLE
    uint32_t sentinel;
#endif

    /*If there is only one property store it directly.
     *For more properties allocate an array*/
    union {
        lv_style_value_t value1;
        uint8_t * values_and_props;
        const lv_style_const_prop_t * const_props;
    } v_p;

    uint16_t prop1 : 15;
    uint16_t is_const : 1;
    uint8_t has_group;
    uint8_t prop_cnt;
} lv_style_t;

初始化样式

添加样式的第三个参数是说明此样式被用在什么情况下，对象的哪部分。

void demo(void)
{
    static lv_style_t style_obj;    //样式结构体
	lv_style_init(&style_obj);      //样式初始化

    lv_style_set_bg_color(&style_obj, lv_color_hex(0x000000));      // 设置背景色

    lv_obj_t * obj = lv_obj_create(lv_scr_act());    //创建对象

    lv_obj_add_style(obj, &style_obj, 0);    //添加样式到对象
}

样式属性有好多好多好多啊 ~ 看手册就好了

样式(Styles)

样式是一个 lv_style_t 变量，它可以保存边框宽度、文本颜色等属性。
将样式(变量)分配给对象就可以改变其外观。在赋值过程中，可以指定目标部分和目标状态。
一个样式可以给多个对象使用（正常样式）。
样式可以级联，也就是可以将多个样式分配给一个对象。所以，我们不用将所有属性都在一个样式中指定，可以通过多个样式组合的形式指定。 LVGL 会优先使用我们定义的样式，如果没有就会使用默认值。
后来添加的样式具有更高的优先级。也就是说如果在两种样式中指定了同一个属性，则将使用最后添加的样式。
如果对象中未指定某些属性（例如文本颜色），就会从父级继承。
上面说的是 “正常” 样式，对象还有本地样式，它比 “正常” 样式具有更高的优先级。
可以定义有过渡效果的样式。
默认有一个样式主题，我们也可以自己定义样式主题，作为默认的样式主题使用

设置样式属性函数接口

lv_style_set_<property_name>(&style, <value>);

添加样式到对象

lv_obj_add_style(obj, &style, <selector>)

获取样式属性

lv_obj_get_style_<property_name>(obj, <part>);

删除样式

//删除对象的所有样式：
lv_obj_remove_style_all(obj);
//删除对象的特定样式：
lv_obj_remove_style(obj, &style_obj, selector);

只有当 selector 与 lv_obj_add_style 中使用的 selector 匹配时，此函数才会删除 style。如果 style 是空，那么会根据给出的 selector 检查并删除所有匹配的样式。如果 selector 是 LV_STATE_ANY 或 LV_PART_ANY 就会删除具有任何状态或部分的样式。

下面这个效果和lv_obj_remove_style_all 的效果是一样的：

lv_obj_remove_style(obj, NULL, LV_STATE_ANY | LV_PART_ANY );

状态(States)

就是设置样式的第三个参数

举例：

LV_STATE_DEFAULT (0x0000) 正常，释放状态
LV_STATE_CHECKED (0x0001) 切换或检查状态
LV_STATE_FOCUSED (0x0002) 通过键盘或编码器聚焦或通过触摸板/鼠标点击
LV_STATE_FOCUS_KEY (0x0004) 通过键盘或编码器聚焦，但不通过触摸板/鼠标聚焦
LV_STATE_EDITED (0x0008) 由编码器编辑
LV_STATE_HOVERED (0x0010) 鼠标悬停（现在不支持）
LV_STATE_PRESSED (0x0020) 被按下
LV_STATE_SCROLLED (0x0040) 正在滚动
LV_STATE_DISABLED (0x0080) 禁用状态
LV_STATE_USER_1 (0x1000) 自定义状态
LV_STATE_USER_2 (0x2000) 自定义状态
LV_STATE_USER_3 (0x4000) 自定义状态
LV_STATE_USER_4 (0x8000) 自定义状态

部分(Part)

对象可以有部分(parts) ，它们也可以有自己的样式。LVGL 中存在以下预定义部分：

LV_PART_MAIN 类似矩形的背景
LV_PART_SCROLLBAR 滚动条
LV_PART_INDICATOR 指标，例如用于滑块、条、开关或复选框的勾选框
LV_PART_KNOB 像手柄一样可以抓取调整值
LV_PART_SELECTED 表示当前选择的选项或部分
LV_PART_ITEMS 如果小部件具有多个相似元素（例如表格单元格）
LV_PART_TICKS 刻度上的刻度，例如对于图表或仪表
LV_PART_CURSOR 标记一个特定的地方，例如文本区域或图表的光标
LV_PART_CUSTOM_FIRST 可以从这里添加自定义部件。

举例：滑竿包含三个部分：背景、旋钮、指标

这意味着滑块的所有三个部分都可以有自己的样式。

滑竿设置示例：

部分和状态是采用或运算的

    /*Create a slider and add the style*/
    lv_obj_t * slider = lv_slider_create(lv_scr_act());


    lv_obj_remove_style_all(slider);    // 删除对象的所有样式，然后下面再添加我们自定义的样式
    lv_obj_add_style(slider, &style_main, LV_PART_MAIN);    // 矩形背景部分
    lv_obj_add_style(slider, &style_indicator, LV_PART_INDICATOR);    // 指针部分
    lv_obj_add_style(slider, &style_pressed_color, LV_PART_INDICATOR | LV_STATE_PRESSED);    // 当指针部分被按下的时候，指针部分应用该样式
    lv_obj_add_style(slider, &style_knob, LV_PART_KNOB);    // 旋钮部分，像按钮一样可以抓取调整值
    lv_obj_add_style(slider, &style_pressed_color, LV_PART_KNOB | LV_STATE_PRESSED);    // 当旋钮部分被按下的时候，旋钮部分应用该样式

    lv_obj_center(slider);

本地样式(私有样式)

本地样式与普通样式类似，但是它不能在其他对象之间共享。如果使用本地样式，将自动分配局部样式，并在删除对象时释放。本地样式对于向对象添加本地自定义很有用。

接口函数：

lv_obj_set_style_<property_name>(obj, <value>, <selector>);

删除本地样式：

lv_obj_remove_local_style_prop(obj, LV_STYLE_..., selector);

样式继承

某些属性（通常与文本相关）可以从父对象的样式继承。

只有没有在为对象设置样式属性的时候，才应用继承。在这种情况下，如果这个属性是可继承的，那这个属性的值会在父类中检索，直到一个对象为该属性指定了一个值。父类将使用自己的状态来确定该值。因此，如果按下按钮，并且文本颜色来自此处，则将使用按下的文本颜色。

过渡特效

默认情况下，当一个对象改变状态（例如它被按下）时，新状态的新属性会立即设置。但是，通过转换，可以在状态更改时播放动画。例如，按下按钮时，其背景颜色可以在 300 毫秒内动画显示为按下的颜色。

样式主题

主题是风格的集合。如果存在活动主题，LVGL将其应用于每个创建的部件(对象)。这将为UI提供一个默认外观，然后可以通过添加更多样式对其进行修改。

OK，这样关于创建一个对象就基本上完成了吧！还是要看手册的，很多东西需要看手册。