。

不过这种布局方式非常死板#xff0c;因为绝对坐标一旦设定就不能自动调整#xf…1、简单布局

lv_obj_set_pos(obj,

调整一个控件的位置或者使用类似的函数单独调整一个方向的坐标将它放在相对父容器左上角的合适位置。

不过这种布局方式非常死板因为绝对坐标一旦设定就不能自动调整而且当控件数量较多时也很难确定合适的坐标值。

lv_obj_align(obj,

从图片中可以看到控件之间不仅可以内对齐也可以外对齐。

如果两个控件间没有包含关系也不要紧可以使用

lv_obj_align_to(obj,

这种对齐的方式对于控件不多的情况下来说是足够了但是有些时候需要对很多并列的控件布局例如一个计算机界面的所有按钮。

这个时候常规的对齐方式就难以满足需求了。

因此LVGL

如果不添加任何布局方式那么所有的控件都会堆放在左上角。

flex

布局可以将一些控件按行或列均匀布局并且可以自动调整它们的间距。

flex-flow

布局的容器在其中创建的元素都会在一个坐标轴上均匀排布。

例如以下使用

for

lv_label_create(btn);lv_label_set_text_fmt(label,

%d,

尽管没有设置按钮的位置但是每一个按钮都会在水平位置上均匀排布。

如果要让排布时不超过父容器的最大宽度可以使用

lv_flex_flow_t

布局中各控件的尺寸和间距都是固定的并且第一个控件依然会出现在左上角。

如果

void

设置控件在一行或一列内的对齐当控件高度或宽度不一致时就可以看出效果track_place

flex-flow

LV_FLEX_ALIGN_CENTER);创建的每个控件之间在水平方向上均匀对齐、行内上下居中对齐并作为一个整体上下居中对齐效果为

LV_FLEX_ALIGN_START,

LV_FLEX_ALIGN_START);创建的每个控件之间在水平方向上两端对齐、行内顶端对齐并作为一个整体顶端对齐效果为

flex

grow);动态调整各个控件的相对宽度实现更灵活的布局规则。

例如以下代码在一个

flex-flow

lv_label_create(btn);lv_label_set_text_fmt(label,

%d,

2);elselv_obj_set_flex_grow(btn,

1);

lv_obj_set_style_base_dir(cont,

LV_BASE_DIR_RTL,

lv_label_create(btn);lv_label_set_text_fmt(label,

%d,

函数设置从右向左的书写方式因此滚动条才会出现在左侧。

后续介绍样式时还会介绍更多类似函数。

一般情况下

的控件都会在同一行布局但它们的宽度可能变得很窄。

因此以上的各个数字按钮相对宽度并不一致。

LVGL

为了创建网格布局首先要给出格子的长度和宽度。

一般来说可以通过两个数组分别描述网格每一行的宽度和每一列的宽度

static

lv_obj_set_grid_dsc_array(lv_obj_t

*obj,

row_span);将每一个控件摆放在合适的网格位置。

align

(0,

lv_btn_create(cont);lv_obj_set_grid_cell(btn,

col,

lv_label_create(btn);lv_label_set_text_fmt(label,

r%d

使用网格布局时每个格子内的控件在创建时都可以在网格内对齐。

除此之外还可以设置网格自身的对齐方式

void

row_align);网格在横向和竖向对齐摆放时对齐方式都类似于

flex

复选框(ckeckbox)是一种类似开关但是带有标签的控件。

可以使用以下代码创建复选框并设置标签文本

lv_obj_t*

DMA);一般用复选框并列表示一些“是/否”的选项因此多个并列的复选项很适合使用

flex

button)这一控件不过可以使用复选框表示单选按钮。

单选按钮在同一时间内只有且必须有一个选择框被选中。

首先创建一个框架并使用列模式的

flex

LV_FLEX_ALIGN_CENTER);然后可以在其中创建一些复选框

#define

checkbox_labels[CHECKBOX_ITEMS]

{Use

lv_checkbox_create(cont);lv_checkbox_set_text(check,

checkbox_labels[i]);

}为了实现单选按钮的效果需要在点击事件中清除上一个被选中的选择框。

这里介绍一个技巧如何获取事件控件的父容器。

如果一个控件被设置了冒泡事件标志

那么该控件被点击时事件将会由它的父容器触发如果父容器也设置了这一标志位那么事件还会继续向上冒泡。

lv_obj_t*

lv_event_get_current_target(lv_event_t*

e);获取最终触发真正送出事件的控件也就是冒泡后的父控件而之前介绍的

函数则获取的是最先触发事件的控件也就是子控件。

这样通过设置合适的冒泡层数就可以同时获取控件与它的父容器了。

checked_index

记录单选按钮组此刻选中的按钮索引号并作为用户数据传给回调函数中

static

}由于事件最终由父容器触发因此要给父容器提供回调函数。

然后在回调函数中通过父容器与索引值取消上一个被点击的选择框选择选择点击的选择框并更新索引值

static

lv_event_get_user_data(e);lv_obj_t*

target

lv_event_get_target(e);lv_obj_t*

parent

lv_event_get_current_target(e);if

(target

return;lv_obj_clear_state(lv_obj_get_child(parent,

LV_STATE_CHECKED);lv_obj_add_state(target,

LV_STATE_CHECKED);*post_checked_index

}由于父容器也拥有点击事件因此首先要判断事件是否是由选择框触发的。

这种事件处理方式非常简洁高效而且无需定义额外的辅助数组。

这样就可以使用复选框代替单选按钮了并且这样的回调函数是可以复用的如果有另一组单选按钮也可以使用类似的方式提供响应

5、列表

的列表(list)表现形式更像大多数界面提供的标题栏菜单。

这里先介绍列表仅仅是因为它比较简单。

列表的核心函数只有

lv_obj_t

列表中的按钮和一般创建的按钮没有区别可以给返回值提供回调函数。

按钮在创建时还可以指定按钮的图标图标的本质就是

Unicode