LVGL V8样式

已于 2022-07-07 15:15:35 修改
阅读量3.3k 收藏 62
点赞数 14
分类专栏： LVGL 文章标签： stm32 c语言
于 2022-07-02 17:25:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37187962/article/details/125451382
版权

盒子模型

创建一个对象lv_obj_t * cont = lv_obj_create(parent);
设置对象大小lv_obj_set_size(cont, 320,30);
内容content高度 = obj高度 - 边框border宽度*2 - 填充padding高度top-填充padding高度bottom

样式

在这里插入图片描述

（一）、样式接口参数

参数1

需要设置样式的对象

参数2

设置样式的值，宽度、颜色、渐变、透明度等
详细说明

颜色
属性名含义
bg_color背景颜色
border_color边框颜色
outline_color轮廓颜色
shadow_color阴影颜色
text_color文本颜色
渐变色
属性名含义
bg_color主要颜色
bg_grad_color渐变颜色
bg_grad_dir渐变方向
bg_main_stop渐变开始位置
bg_grad_stop渐变结束位置
bg_dither_mode渲染模式
透明度
属性名含义
bg_opa背景透明度
border_opa边框透明度
outline_opa轮廓透明度
shadow_opa阴影透明度
text_opa文本透明度
opa整体透明度

参数3

应添加样式的States（状态）和Parts（部分）的 OR-ed 值

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) 自定义状态

Parts(部分)
宏名称值部分作用
LV_PART_MAIN0x000000背景类似矩形的背景
LV_PART_SCROLLBAR0x010000滚动条
LV_PART_INDICATOR0x020000指标例如用于滑块、条、开关或复选框的勾选框
LV_PART_KNOB0x030000旋钮像手柄一样可以抓取调整值
LV_PART_SELECTED0x040000焦点表示当前选择的选项或部分
LV_PART_ITEMS0x050000表格如果小部件具有多个相似元素（例如表格单元格）
LV_PART_TICKS0x060000刻度例如对于图表或仪表
LV_PART_CURSOR0x070000标记例如文本区域或图表的光标
LV_PART_CUSTOM_FIRST0x080000可以从这里添加自定义部件
LV_PART_ANY0x0F0000特殊的值可以在一些函数中用于目标的所有部分

各个Widgets（组件）均是由以上Parts（部分）组成的
例如：
组件Slider 包含三个部分：
背景（LV_PART_MAIN）、
指标（LV_PART_INDICATOR）、
旋钮（LV_PART_KNOB）

添加样式

对选中的状态和部分添加样式
0 与 LV_PART_MAIN、LV_STATE_DEFAULT等效。
LV_STATE_PRESSED：对按下状态的背景部分添加样式。 LV_PART_MAIN 可以省略。
LV_PART_SCROLLBAR：对默认状态下的滚动条部分添加。 LV_STATE_DEFAULT 可以省略。
LV_PART_SCROLLBAR | LV_STATE_SCROLLED：对对象滚动时的滚动条部分添加样式。
LV_PART_INDICATOR | LV_STATE_PRESSED | LV_STATE_CHECKED 对同时按下和检查对象时的指示器部分添加样式。

（二）、outline轮廓

对象大小并不包括轮廓，一般用于使用物理按钮时对对象的聚焦

void lv_obj_set_style_outline_width(struct _lv_obj_t * obj, lv_coord_t value, lv_style_selector_t selector);
void lv_obj_set_style_outline_color(struct _lv_obj_t * obj, lv_color_t value, lv_style_selector_t selector);
void lv_obj_set_style_outline_color_filtered(struct _lv_obj_t * obj, lv_color_t value, lv_style_selector_t selector);
void lv_obj_set_style_outline_opa(struct _lv_obj_t * obj, lv_opa_t value, lv_style_selector_t selector);
void lv_obj_set_style_outline_pad(struct _lv_obj_t * obj, lv_coord_t value, lv_style_selector_t selector);

在这里插入图片描述

（三）、body背景

背景包括边框（border），填充（padding）和阴影（shadow）

void lv_obj_set_style_bg_color(struct _lv_obj_t * obj, lv_color_t value, lv_style_selector_t selector);
void lv_obj_set_style_bg_color_filtered(struct _lv_obj_t * obj, lv_color_t value, lv_style_selector_t selector);
void lv_obj_set_style_bg_opa(struct _lv_obj_t * obj, lv_opa_t value, lv_style_selector_t selector);
void lv_obj_set_style_bg_grad_color(struct _lv_obj_t * obj, lv_color_t value, lv_style_selector_t selector);
void lv_obj_set_style_bg_grad_color_filtered(struct _lv_obj_t * obj, lv_color_t value, lv_style_selector_t selector);
void lv_obj_set_style_bg_grad_dir(struct _lv_obj_t * obj, lv_grad_dir_t value, lv_style_selector_t selector);
void lv_obj_set_style_bg_main_stop(struct _lv_obj_t * obj, lv_coord_t value, lv_style_selector_t selector);
void lv_obj_set_style_bg_grad_stop(struct _lv_obj_t * obj, lv_coord_t value, lv_style_selector_t selector);
void lv_obj_set_style_bg_grad(struct _lv_obj_t * obj, const lv_grad_dsc_t * value, lv_style_selector_t selector);

void lv_obj_set_style_bg_dither_mode(struct _lv_obj_t * obj, lv_dither_mode_t value, lv_style_selector_t selector);

//设置对象背景图片来源
void lv_obj_set_style_bg_img_src(struct _lv_obj_t * obj, const void * value, lv_style_selector_t selector);
//设置图片透明度
void lv_obj_set_style_bg_img_opa(struct _lv_obj_t * obj, lv_opa_t value, lv_style_selector_t selector);
// 设置样式图片重新着色
void lv_obj_set_style_bg_img_recolor(struct _lv_obj_t * obj, lv_color_t value, lv_style_selector_t selector);
void lv_obj_set_style_bg_img_recolor_filtered(struct _lv_obj_t * obj, lv_color_t value, lv_style_selector_t selector);
// 设置样式图片重新着色透明度
void lv_obj_set_style_bg_img_recolor_opa(struct _lv_obj_t * obj, lv_opa_t value, lv_style_selector_t selector);
void lv_obj_set_style_bg_img_tiled(struct _lv_obj_t * obj, bool value, lv_style_selector_t selector);

设置背景图片，默认显示img_src_good_rel，按下显示img_src_good_pre

lv_obj_set_style_bg_img_src(obj1, &img_src_good_rel, 0);
lv_obj_set_style_bg_img_src(obj1, &img_src_good_pre, LV_STATE_PRESSED);

在这里插入图片描述

1、border边框

void lv_obj_set_style_border_color(struct _lv_obj_t * obj, lv_color_t value, lv_style_selector_t selector);
//设置样式边框过滤颜色
void lv_obj_set_style_border_color_filtered(struct _lv_obj_t * obj, lv_color_t value, lv_style_selector_t selector);
//设置边框的 opcitiy。值0，LV_OPA_0或LV_OPA_TRANSP表示完全透明，256，LV_OPA_100或LV_OPA_COVER表示完全覆盖，其他值或LV_OPA_10、LV_OPA_20等表示半透明。
void lv_obj_set_style_border_opa(struct _lv_obj_t * obj, lv_opa_t value, lv_style_selector_t selector);
void lv_obj_set_style_border_width(struct _lv_obj_t * obj, lv_coord_t value, lv_style_selector_t selector);
//设置应绘制边框的任何一侧
void lv_obj_set_style_border_side(struct _lv_obj_t * obj, lv_border_side_t value, lv_style_selector_t selector);
//设置是在绘制子项之前还是之后绘制边框。true: 子类之后, false: 子类之前
void lv_obj_set_style_border_post(struct _lv_obj_t * obj, bool value, lv_style_selector_t selector);

函数lv_obj_set_style_border_side输入参数2值的含义：

enum {
    LV_BORDER_SIDE_NONE     = 0x00,  //无边框
    LV_BORDER_SIDE_BOTTOM   = 0x01,  //底部边框
    LV_BORDER_SIDE_TOP      = 0x02,  //顶部边框
    LV_BORDER_SIDE_LEFT     = 0x04,  //左边边框
    LV_BORDER_SIDE_RIGHT    = 0x08,  //右边边框
    LV_BORDER_SIDE_FULL     = 0x0F,  //四周边框
    LV_BORDER_SIDE_INTERNAL = 0x10, /**< FOR matrix-like objects (e.g. Button matrix) 对于矩阵类对象(例如按钮矩阵)*/
};
typedef uint8_t lv_border_side_t;

2、padding填充

void lv_obj_set_style_pad_top(struct _lv_obj_t * obj, lv_coord_t value, lv_style_selector_t selector);
void lv_obj_set_style_pad_bottom(struct _lv_obj_t * obj, lv_coord_t value, lv_style_selector_t selector);
void lv_obj_set_style_pad_left(struct _lv_obj_t * obj, lv_coord_t value, lv_style_selector_t selector);
void lv_obj_set_style_pad_right(struct _lv_obj_t * obj, lv_coord_t value, lv_style_selector_t selector);
void lv_obj_set_style_pad_row(struct _lv_obj_t * obj, lv_coord_t value, lv_style_selector_t selector);
void lv_obj_set_style_pad_column(struct _lv_obj_t * obj, lv_coord_t value, lv_style_selector_t selector);

顶部边距 pad_top：在顶部设置填充。它使这个方向的内容区域更小。
底部边距 pad_bottom：在底部设置填充。它使这个方向的内容区域更小。.
左边距边距 pad_left：设置左边的填充。它使这个方向的内容区域更小。
右边距 pad_right：设置右侧的填充。它使这个方向的内容区域更小。

行边距 pad_row：设置行之间的填充。由布局使用。

创建两个容器container_row1，container_row2，对比设置pad_row的差异
lv_obj_t * container_row1 = lv_obj_create(lv_scr_act()); // 创建一个对象container_row1
lv_obj_set_size(container_row1, 500, 75); // 设置对象大小
lv_obj_align(container_row1, LV_ALIGN_TOP_MID, 0, 5); // 设置对象基于屏幕中间对齐
lv_obj_set_flex_flow(container_row1, LV_FLEX_FLOW_ROW); // 设置对象使用基于行的流失弹性布局flex

lv_obj_t * container_row2 = lv_obj_create(lv_scr_act()); // 创建一个对象container_row2
lv_obj_set_size(container_row2, 500, 75); // 设置对象大小
// 设置对象container_row2基于对象container_row1外部下方中间对齐
lv_obj_align_to(container_row2, container_row1, LV_ALIGN_OUT_BOTTOM_MID, 0, 20);
lv_obj_set_flex_flow(container_row2, LV_FLEX_FLOW_ROW); // 设置对象使用基于行的流失弹性布局flex
lv_obj_set_style_pad_ver(container_row2, 0, 0); // 设置对象内部水平方向的填充为0
lv_obj_set_style_pad_row(container_row2, 0, 0);  // 设置对象container_row2内部item之间的行间距填充为0
lv_obj_set_style_pad_column(container_row2, 1, 0); // 设置对象container_row2内部item之间的列间距填充为1

在容器中创建标签

lv_obj_t * obj = NULL;
lv_obj_t * label = NULL;

static lv_style_t btn_style;
lv_style_init(&btn_style); // 初始化样式
lv_style_set_radius(&btn_style, 0); // 设置样式圆角为0

for(i = 0; i < 10; i++)
{
	obj = lv_btn_create(container_row1); // 基于container_row1对象添加button对象
	lv_obj_set_size(obj, 100, LV_PCT(100)); // 设置对象大小
	
	label = lv_label_create(obj); // 创建按键对象创建label对象
	lv_label_set_text_fmt(label, "Item: %d", i); // 设置label文本
	lv_obj_center(label); // label对象居中显示
}

for(i = 0; i < 4; i++)
{
	obj= lv_btn_create(container_row2);
	lv_obj_add_style(obj, &btn_style, 0);
	lv_obj_set_size(obj, 100, LV_PCT(100));
	
	label = lv_label_create(obj);
	lv_label_set_text_fmt(label, "Item: %d", i);
	lv_obj_center(label);
}

在这里插入图片描述
列边距 pad_column：设置列之间的填充。由布局使用。
lvgl内部还封装了几个简写属性：可以使用 …pad_all() 一并设置上下左右的边距；或使用 …pad_hor() 和 …pad_ver() 设置水平和垂直的边距；还可以使用 …pad_gap() 设置行和列的间距。

创建两个容器container_row1，container_row2，对比设置pad_column的差异
lv_obj_t * container_col1 = lv_obj_create(lv_scr_act());
lv_obj_set_size(container_col1, 100, 250); // 设置对象大小
 // 设置对象container_col1基于对象container_row2外部下方中间对齐
lv_obj_align_to(container_col1, container_row2, LV_ALIGN_OUT_BOTTOM_MID, -100, 20);
lv_obj_set_flex_flow(container_col1, LV_FLEX_FLOW_COLUMN); // 设置对象使用基于列的流失弹性布局flex

lv_obj_t * container_col2 = lv_obj_create(lv_scr_act());
lv_obj_set_size(container_col2, 100, 250); // 设置对象大小
// 设置对象container_col2基于对象container_row2外部下方中间对齐
lv_obj_align_to(container_col2, container_row2, LV_ALIGN_OUT_BOTTOM_MID, 100, 20);
lv_obj_set_flex_flow(container_col2, LV_FLEX_FLOW_COLUMN);  // 设置对象使用基于列的流失弹性布局flex
lv_obj_set_style_pad_hor(container_col2, 0, 0);  // 设置对象内部垂直方向的填充为0
lv_obj_set_style_pad_row(container_col2, 1, 0); // 设置对象container_col2内部item之间的行间距填充为1
lv_obj_set_style_pad_column(container_col2, 0, 0); // 设置对象container_col2内部item之间的列间距填充为0

for(i = 0; i < 10; i++)
{
	obj = lv_btn_create(container_col1);
	lv_obj_set_size(obj, LV_PCT(100), LV_SIZE_CONTENT);
	
	label = lv_label_create(obj);
	lv_label_set_text_fmt(label, "Item: %d", i);
	lv_obj_center(label);
}
 
for(i = 0; i < 4; i++)
{
	obj = lv_btn_create(container_col2);
	lv_obj_set_size(obj, LV_PCT(100), LV_SIZE_CONTENT);
	lv_obj_add_style(obj, &btn_style, 0);
	
	label = lv_label_create(obj);
	lv_label_set_text_fmt(label, "Item: %d", i);
	lv_obj_center(label);
}

在这里插入图片描述

3、shadow阴影

可以设置阴影宽度、偏移方向、颜色、透明度

void lv_obj_set_style_shadow_width(struct _lv_obj_t * obj, lv_coord_t value, lv_style_selector_t selector);
void lv_obj_set_style_shadow_ofs_x(struct _lv_obj_t * obj, lv_coord_t value, lv_style_selector_t selector);
void lv_obj_set_style_shadow_ofs_y(struct _lv_obj_t * obj, lv_coord_t value, lv_style_selector_t selector);
void lv_obj_set_style_shadow_spread(struct _lv_obj_t * obj, lv_coord_t value, lv_style_selector_t selector);
void lv_obj_set_style_shadow_color(struct _lv_obj_t * obj, lv_color_t value, lv_style_selector_t selector);
//设置样式阴影颜色过滤
void lv_obj_set_style_shadow_color_filtered(struct _lv_obj_t * obj, lv_color_t value, lv_style_selector_t selector);
//设置阴影的不透明度。值0，LV_OPA_0或LV_OPA_TRANSP表示完全透明，256，LV_OPA_100或LV_OPA_COVER表示完全覆盖，其他值或LV_OPA_10、LV_OPA_20等表示半透明。
void lv_obj_set_style_shadow_opa(struct _lv_obj_t * obj, lv_opa_t value, lv_style_selector_t selector);

在这里插入图片描述

（四）、content内容

1、内容为图片

void lv_obj_set_style_img_opa(struct _lv_obj_t * obj, lv_opa_t value, lv_style_selector_t selector);
void lv_obj_set_style_img_recolor(struct _lv_obj_t * obj, lv_color_t value, lv_style_selector_t selector);
void lv_obj_set_style_img_recolor_filtered(struct _lv_obj_t * obj, lv_color_t value, lv_style_selector_t selector);
void lv_obj_set_style_img_recolor_opa(struct _lv_obj_t * obj, lv_opa_t value, lv_style_selector_t selector);

2、内容为线段

void lv_obj_set_style_line_width(struct _lv_obj_t * obj, lv_coord_t value, lv_style_selector_t selector);
void lv_obj_set_style_line_dash_width(struct _lv_obj_t * obj, lv_coord_t value, lv_style_selector_t selector);
void lv_obj_set_style_line_dash_gap(struct _lv_obj_t * obj, lv_coord_t value, lv_style_selector_t selector);
void lv_obj_set_style_line_rounded(struct _lv_obj_t * obj, bool value, lv_style_selector_t selector);
void lv_obj_set_style_line_color(struct _lv_obj_t * obj, lv_color_t value, lv_style_selector_t selector);
void lv_obj_set_style_line_color_filtered(struct _lv_obj_t * obj, lv_color_t value, lv_style_selector_t selector);
void lv_obj_set_style_line_opa(struct _lv_obj_t * obj, lv_opa_t value, lv_style_selector_t selector);

3、内容为圆弧

void lv_obj_set_style_arc_width(struct _lv_obj_t * obj, lv_coord_t value, lv_style_selector_t selector);
void lv_obj_set_style_arc_rounded(struct _lv_obj_t * obj, bool value, lv_style_selector_t selector);
void lv_obj_set_style_arc_color(struct _lv_obj_t * obj, lv_color_t value, lv_style_selector_t selector);
void lv_obj_set_style_arc_color_filtered(struct _lv_obj_t * obj, lv_color_t value, lv_style_selector_t selector);
void lv_obj_set_style_arc_opa(struct _lv_obj_t * obj, lv_opa_t value, lv_style_selector_t selector);
void lv_obj_set_style_arc_img_src(struct _lv_obj_t * obj, const void * value, lv_style_selector_t selector);

4、内容为文本

//设置样式文本字颜色
void lv_obj_set_style_text_color(struct _lv_obj_t * obj, lv_color_t value, lv_style_selector_t selector);    
//设置样式文本字颜色过滤色    
void lv_obj_set_style_text_color_filtered(struct _lv_obj_t * obj, lv_color_t value, lv_style_selector_t selector);
//设置样式文本字透明度
void lv_obj_set_style_text_opa(struct _lv_obj_t * obj, lv_opa_t value, lv_style_selector_t selector);      
//设置样式文本字字体 
void lv_obj_set_style_text_font(struct _lv_obj_t * obj, const lv_font_t * value, lv_style_selector_t selector);  
//设置样式文本字符间隔
void lv_obj_set_style_text_letter_space(struct _lv_obj_t * obj, lv_coord_t value, lv_style_selector_t selector); 
//设置样式文本行间距 
void lv_obj_set_style_text_line_space(struct _lv_obj_t * obj, lv_coord_t value, lv_style_selector_t selector);  
//设置样式文本装饰划线
void lv_obj_set_style_text_decor(struct _lv_obj_t * obj, lv_text_decor_t value, lv_style_selector_t selector);  
void lv_obj_set_style_text_align(struct _lv_obj_t * obj, lv_text_align_t value, lv_style_selector_t selector);

（五）、其他

//设置样式的圆角弧度
void lv_obj_set_style_radius(struct _lv_obj_t * obj, lv_coord_t value, lv_style_selector_t selector);

//子对象超出父对象部分隐藏
void lv_obj_set_style_clip_corner(struct _lv_obj_t * obj, bool value, lv_style_selector_t selector);

在这里插入图片描述


void lv_obj_set_style_opa(struct _lv_obj_t * obj, lv_opa_t value, lv_style_selector_t selector);
void lv_obj_set_style_color_filter_dsc(struct _lv_obj_t * obj, const lv_color_filter_dsc_t * value,lv_style_selector_t selector);
void lv_obj_set_style_color_filter_opa(struct _lv_obj_t * obj, lv_opa_t value, lv_style_selector_t selector);
void lv_obj_set_style_anim_time(struct _lv_obj_t * obj, uint32_t value, lv_style_selector_t selector);
void lv_obj_set_style_anim_speed(struct _lv_obj_t * obj, uint32_t value, lv_style_selector_t selector);
void lv_obj_set_style_transition(struct _lv_obj_t * obj, const lv_style_transition_dsc_t * value,lv_style_selector_t selector);
void lv_obj_set_style_blend_mode(struct _lv_obj_t * obj, lv_blend_mode_t value, lv_style_selector_t selector);
void lv_obj_set_style_layout(struct _lv_obj_t * obj, uint16_t value, lv_style_selector_t selector);


//修改布局排列方向
void lv_obj_set_style_base_dir(struct _lv_obj_t * obj, lv_base_dir_t value, lv_style_selector_t selector);

方向可能的取值为

enum {
    LV_BASE_DIR_LTR      = 0x00,
    LV_BASE_DIR_RTL      = 0x01,
    LV_BASE_DIR_AUTO     = 0x02,

    LV_BASE_DIR_NEUTRAL  = 0x20,
    LV_BASE_DIR_WEAK     = 0x21,
};

typedef uint8_t lv_base_dir_t;

举例说明：

static void lv_example_flex_6(void)
{
    lv_obj_t* cont = lv_obj_create(lv_scr_act()); //当前活动界面创建obj对象
    lv_obj_set_style_base_dir(cont, LV_BASE_DIR_RTL, 0); // right to left方向
    lv_obj_set_size(cont, 300, 220); //设置大小
    lv_obj_center(cont); // 居中显示
    lv_obj_set_flex_flow(cont, LV_FLEX_FLOW_ROW_WRAP); //设置LV_FLEX_FLOW_ROW_WRAP方式排列
    uint32_t i;
    for (i = 0; i < 20; i++) {
        lv_obj_t* obj = lv_obj_create(cont); //在cont对象上创建obj对象
        lv_obj_set_size(obj, 70, LV_SIZE_CONTENT); //设置大小
        lv_obj_t* label = lv_label_create(obj); //创建label
        lv_label_set_text_fmt(label, "%d", i); //设置显示内容
        lv_obj_center(label); // 居中显示
    }
}

在这里插入图片描述

//修改排列方向为LV_BASE_DIR_LTR
lv_obj_set_style_base_dir(cont, LV_BASE_DIR_LTR, 0);

在这里插入图片描述

临界msp
关注
专栏目录
LVGL v8移植正点原子F1源代码
07-29
在这个项目中，LVGL v8被移植到了正点原子F1开发板上，以便在该硬件平台上创建图形化的用户界面。 移植过程通常涉及以下几个关键步骤： 1. **环境配置**：首先，你需要安装Keil μVision IDE，这是一个广泛使用的...
LVGL V8 移植.zip
11-16
LVGL V8 移植是关于将LVGL（LittleVGL）图形用户界面库的第八个主要版本集成到特定硬件平台或操作系统的过程。LVGL是一个开源的、高效的嵌入式GUI库，它允许开发者在微控制器或小型嵌入式系统上创建丰富的图形用户...
LVGL学习笔记10 - 按钮Button
pq的博客
01-01 8950
按钮有点类似矩形框，更多的是具有事件属性。通过lv_btn_create创建。按钮的Parts只有LV_PART_MAIN。
lvgl 显示图片示例
neo_Wordsworth的博客
07-04 2261
lvgl 显示图片示例
lvgl 实现表格table，并且固定表头
最新发布
m0_61704502的博客
05-07 461
嵌入式实现table，lvgl 实现原生表格table组件
对象可以处于以下状态的组合（按钮）
weixin_47796055的博客
08-16 786
33333
【随笔记】Littlevgl 8.x 踩过的坑
lovemengx的博客
04-14 3553
在多线程并发使用的时候，总是在运行过程中莫名其妙的 crash，后面才意识到 LVGL 本身不支持并发，加了互斥锁解决了。 在引入矢量字库时（freetype），又有启动时会概率性 crash 的问题，每次 crash 的地方还不一样，这个坑爬了好久，甚至都怀疑是不是 freetype 有问题，还好总算找到方法解决了，不过还不清楚具体原因，先记录。 以下以 linux 平台下 C++ 语言的方式举例说明，理解方法即可。 一、多线程并发使用 多线程并发使用时，需要在以下两种情况加上互斥锁： 1. .
第四节 LVGL部件使用
picassocao的博客
02-20 8478
LVGL部件使用
LVGL：样式
友善啊，朋友的博客
02-22 1452
样式是一个。
LVGL V8函数解析.pdf
11-16
lvgl 函数解析
LVGL8.1.pdf
09-18
LVGL V8的样式示例代码包括： * 默认样式 * 自定义样式 2.3 动画 LVGL V8的动画示例代码包括： * 基本动画 * 高级动画 2.4 事件 LVGL V8的事件示例代码包括： * 按钮事件 * 标签事件 2.5 布局 LVGL V8的...
LVGL V8之border styles
mygod2008ok的专栏
08-15 891
创建style 初时化style static lv_style_t style; lv_style_init(&style); 设置倒角为10 lv_style_set_radius(&style, 10); 设置背景透明度为不透明 lv_style_set_bg_opa(&style, LV_OPA_COVER); 设置背景色为淡灰色 lv_style_set_bg_color(&style, lv_palette_lighte
LVGL部件7
m0_73731708的博客
02-02 2095
在LVGL（LittlevGL）中，要设置图像对象的旋转中心点，可以使用函数。xy以下是一个示例代码，展示如何使用在这个示例中，我们创建了一个图像对象img，然后使用函数将该图像对象的旋转中心点设置为图像的中心点。在LVGL（LittlevGL）中，可以使用函数来设置图像对象的旋转角度。angle以下是一个示例代码，展示如何使用在这个示例中，我们创建了一个图像对象img，然后使用函数将该图像对象的旋转角度设置为 90 度，表示将图像按顺时针方向旋转 90 度。在LVGL（LittlevGL）中，可以使用。
LVGL8学习之Image Styles
菜鸟攻城狮
08-25 1123
这一篇来学习一下Image Style的使用，还是通过codeblock来模拟代码的运行，代码如下： void lv_image_style_test() { static lv_style_t style; LV_IMG_DECLARE(img_cogwheel_argb); // 声明图片变量 lv_style_init(&style); // 样式初始化 lv_style_reset(&style); // 重置样式 lv_style_.
LVGL7.0设置界面背景
热门推荐
qq_36690796的博客
01-06 1万+
界面背景 1、界面纯色背景创建 创建背景纯色 void Home_Page_Create(void) { lv_obj_t* bgk; bgk = lv_obj_create(lv_scr_act(), NULL);//创建对象 lv_obj_clean_style_list(bgk, LV_OBJ_PART_MAIN); //清空对象...
Lvgl7 基础对象(lv_obj)
wasapp的博客
03-19 5150
Lvgl 基础对象(lv_obj)
LVGL8学习之transition
菜鸟攻城狮
08-26 1118
这一篇来学一下transition 默认情况下，当一个对象改变状态时新的状态和属性会被立即设置。但是，使用transition转换，可以在状态更改时播放动画。例如：按下Button，其背景色可以播放超过300ms的动画颜色。转换的参数存储在样式中。可以设置： （1）转换的时间 （2）开始转换前的延时时间 （3）动画的路径 （4）动画的属性 可以为每个状态定义转换属性。例如：在默认状态下设置500ms的转换时间将意味着当对象转到默认状态时，将应用500ms的转换时间。在按下状态下设置100ms的转
lvgl lv_tabview tab透明设置
tengfeidx的博客
04-23 718
上面代码完成lv_tabview，的tab隐藏功能。lvgl lv_tabview tab透明设置。
LV_PART_MAIN = 0x000000, /**< A background like rectangle*/ LV_PART_SCROLLBAR = 0x010000, /**< The scrollbar(s)*/ LV_PART_INDICATOR = 0x020000, /**< Indicator, e.g. for slider, bar, switch, or the tick box of the checkbox*/ LV_PART_KNOB = 0x030000, /**< Like handle to grab to adjust the value*/ LV_PART_SELECTED = 0x040000, /**< Indicate the currently selected option or section*/ LV_PART_ITEMS = 0x050000, /**< Used if the widget has multiple similar elements (e.g. table cells)*/ LV_PART_TICKS = 0x060000, /**< Ticks on scale e.g. for a chart or meter*/ LV_PART_CURSOR = 0x070000, /**< Mark a specific place e.g. for text area's cursor or on a chart*/
06-08
这是 LittlevGL 图形库中的常量定义，用于指定不同部分的样式类型。每个常量都是一个 24 位的十六进制数，其中前 16 位表示部分类型，后 8 位表示子部分类型。常量列表如下： - 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_obj_add_style()、lv_obj_get_style() 和 lv_obj_set_style_local_xxx() 等函数一起使用，用于指定要设置或获取的部分样式类型。例如，以下代码将为一个按钮对象的主部分设置背景颜色： ``` lv_obj_t * btn = lv_btn_create(lv_scr_act(), NULL); lv_style_t * btn_style = lv_obj_get_style(btn); lv_style_set_bg_color(btn_style, LV_STATE_DEFAULT, LV_COLOR_RED); lv_obj_add_style(btn, LV_PART_MAIN, btn_style); ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值