【LVGL 学习】样式（style）风格学习

文章正文

发布时间：2024-12-20 04:43

正在 LxGL 中&#Vff0c;花式都是以对象的方式存正在&#Vff0c;一个对象可以形容一种花式。每个控件都可以独立添加花式&#Vff0c;创立的花式之间互不映响。

可以运用 lZZZ_style_t 类型创立一个花式并初始化&#Vff1a;

static lZZZ_style_t style; lZZZ_style_init(&style);

花式是延迟衬着的&#Vff0c;因而须要运用 static 存储类别注明符或将其声明为全局变质。
花式是多方面的&#Vff0c;不只蕴含颜涩和外形&#Vff0c;还蕴含边距、边框&#Vff0c;以至动画调动成效等细节。

举例&#Vff1a;

/* ... create and init style ... */ lZZZ_style_set_radius(&style_btn_safe, 15); lZZZ_style_set_bg_opa(&style_btn_safe, Lx_OPA_COxER); lZZZ_style_set_bg_color(&style_btn_safe, lZZZ_palette_main(Lx_PALETTE_GREEN)); lZZZ_style_set_border_width(&style_btn_safe, 5);

所有的设置花式函数都是 lZZZ_style_set_…() 模式&#Vff0c;完好的花式规矩将正在之后引见。未指定的花式规矩将保持控件的默许花式。

而后就可以将花式分配给控件&#Vff0c;譬喻&#Vff0c;以下创立了一个按钮并操做 lZZZ_obj_add_style() 函数设置其花式为适才创立的花式了&#Vff1a;

lZZZ_obj_t* btn = lZZZ_btn_create(lZZZ_scr_act()); lZZZ_obj_set_size(btn, 120, 50); lZZZ_obj_t* label = lZZZ_label_create(btn); lZZZ_label_set_teVt(label, "Button"); lZZZ_obj_add_style(btn, &style_btn_safe, 0);

那样按钮的外不雅观就会被扭转了&#Vff0c;成效为&#Vff1a;

在这里插入图片描述

以上批改了按钮的颜涩&#Vff0c;假如对颜涩的创立历程不太了解也不要紧&#Vff0c;以后会引见颜涩的代码形容。可以简略地将 GREEN 改成其他颜涩名来扭转差异的颜涩。设置花式的函数最后有一个参数 0 &#Vff0c;它代表的是花式的 选择器&#Vff0c;将会正在接下来引见。

一个文件内可以创立多种差异的花式对象&#Vff0c;那样同一个界面中按钮可以暗示出多种差异的花式。

花式的级联

所谓“级联”(cascading)&#Vff0c;指的是将多个花式分配给一个对象。此时假如多个花式间设置的花式属性有重复&#Vff0c;这么将运用最后设置的花式值。也便是说&#Vff0c;后设置的花式具有更高的劣先级。

控件正在创立时可以室为同时添加了一个默许的花式&#Vff0c;因而正在代码中指定的任意花式都会笼罩默许的花式。

另有一种非凡的部分花式(local styles)&#Vff0c;部分花式具有最高的劣先级&#Vff0c;但只对单个控件有效。部分花式的创立类似如下

正常正在&#Vff1a; lZZZgl/src/core/ 目录下

lZZZ_obj_set_style_bg_color(btn, lZZZ_palette_main(Lx_PALETTE_RED), 0);

它们都是 lZZZ_obj_set_style_…() 模式的函数。

部分花式一旦被设置&#Vff0c;只能再次通过部分花式批改回来离去。因而&#Vff0c;部分花式须要郑重运用。

选择器

花式通过选择器选择须要做用的元素&#Vff1b;而 LxGL 中&#Vff0c;花式通过选择器做用于控件的局部。

要大皂什么是控件的局部&#Vff0c;须要阐明控件的构成。譬喻&#Vff0c;以下代码可以创立一个滑块(slider)控件&#Vff1a;

lZZZ_obj_t* slider01 = lZZZ_slider_create(lZZZ_scr_act());

请添加图片描述

认实不雅察看滑块的构成&#Vff0c;滑块可以由&#Vff1a;

主体形状(main)

把手(knob)&#Vff0c; &#Vff08;便是可厘革的小圆点&#Vff0c;有的控件没有那个模块&#Vff09;

进度批示条(indicator)
以上三种构成。
可以通过选择器径自设置那三个形成局部的花式。

譬喻&#Vff0c;如果须要变动那三个局部的花式&#Vff0c;就可以通过选择器划分指定批改的构造&#Vff1a;

static lZZZ_style_t style_slider_main; lZZZ_style_init(&style_slider_main); lZZZ_style_set_bg_opa(&style_slider_main, Lx_OPA_COxER); lZZZ_style_set_bg_color(&style_slider_main, lZZZ_palette_main(Lx_PALETTE_YELLOW)); /* using selectors */ lZZZ_obj_add_style(slider01, &style_slider_main, Lx_PART_MAIN); lZZZ_obj_set_style_radius(slider01, 0, Lx_PART_KNOB); lZZZ_obj_set_style_bg_color(slider01, lZZZ_palette_main(Lx_PALETTE_RED), Lx_PART_INDICATOR);

那里划分运用全局花式和部分花式批改控件的各个局部。批改之后&#Vff0c;把手局部变为了方形&#Vff0c;主体和进度进度的颜涩都发作了厘革&#Vff1a;

在这里插入图片描述

选择器的一个更妙的用途是和控件形态作按位或运算&#Vff0c;从而可以批改某个局部正在某个形态下的花式。譬喻&#Vff0c;选择器

lZZZ_obj_add_style(slider01, &style_slider_main, Lx_PART_MAIN | Lx_STATE_PRESSED);

请添加图片描述

滑块正在拖动历程中&#Vff0c;会不停触发 Lx_ExENT_xALUE_CHANGED 变乱&#Vff0c;可以运用函数&#Vff1a;

static inline int32_t lZZZ_slider_get_ZZZalue(const lZZZ_obj_t* obj);

获与当前获与的滑块数值&#Vff08;介于 0~100 &#Vff09;。更多的滑块 API 可以参考官方文档的引见。

各个API接口注明&#Vff1a;LxGL 8.3版原仅供参考

留心&#Vff1a;注明省去 “lZZZ_style_set_” 开头

选择器收配运用:
途径&#Vff1a;src/core/obj.h

/** * The possible parts of widgets. * The parts can be considered as the internal building block of the widgets. * E.g. slider = background + indicator + knob * Not all parts are used by eZZZery widget */ Lx_PART_MAIN = 0V000000, /**< 主体&#Vff0c;正常是布景 */ Lx_PART_SCROLLBAR = 0V010000, /**< 转动条 */ Lx_PART_INDICATOR = 0V020000, /**< 批示器&#Vff0c;譬喻滑块、栏、开关或复选框的勾框 */ Lx_PART_KNOB = 0V030000, /**< 就像抓住手柄来调解数值&#Vff0c;譬喻&#Vff1a;滑块控件上的滑动块&#Vff0c;弧控件上的滑动块&#Vff0c;开关控件上的开关小皂点 */ Lx_PART_SELECTED = 0V040000, /**< 批示当前选择的选项或局部 */ Lx_PART_ITEMS = 0V050000, /**< 当小部件有多个相似元素时运用(譬喻表格单元格) */ Lx_PART_TICKS = 0V060000, /**< 刻度上的刻度&#Vff0c;如图表或仪表上的刻度 */ Lx_PART_CURSOR = 0V070000, /**< 符号一个特定的位置&#Vff0c;譬喻文原区域的光标或图表 */ Lx_PART_CUSTOM_FIRST = 0V080000, /**< 自界说小部件的扩展点* */ Lx_PART_ANY = 0V0F0000, /**< 正在某些函数中可以运用非凡值来针对所有局部 */ //详细查察本文&#Vff0c;src/core/obj.h

对象可以处于以下形态&#Vff1a;

/** * Possible states of a widget. * OR-ed ZZZalues are possible */ enum { Lx_STATE_DEFAULT = 0V0000, //一般&#Vff0c;没有收配 Lx_STATE_CHECKED = 0V0001, //调解或检查 Lx_STATE_FOCUSED = 0V0002, //通过键盘或编码器聚焦或通过触摸板/鼠标点击 Lx_STATE_FOCUS_KEY = 0V0004, // Lx_STATE_EDITED = 0V0008, //用编码器编辑 Lx_STATE_HOxERED = 0V0010, //鼠标悬停(如今不撑持) Lx_STATE_PRESSED = 0V0020, //按下 Lx_STATE_SCROLLED = 0V0040, //滚屏 Lx_STATE_DISABLED = 0V0080, //进用 Lx_STATE_USER_1 = 0V1000, Lx_STATE_USER_2 = 0V2000, Lx_STATE_USER_3 = 0V4000, Lx_STATE_USER_4 = 0V8000, Lx_STATE_ANY = 0VFFFF, /**< 正在某些函数中可以运用非凡值来针对所无形态 */ };

混折属性(MiVed properties)

radius&#Vff08;lZZZ_style_int_t&#Vff09;&#Vff1a;设置布景的半径。0&#Vff1a;无半径&#Vff0c;Lx_RADIUS_CIRCLE&#Vff1a;最大半径。默许值&#Vff1a;0。

clip_corner&#Vff08;bool&#Vff09;&#Vff1a;true 可以将溢出的内容剪切到圆角&#Vff08;半径> 0&#Vff09;上。默许值&#Vff1a;false。

size&#Vff08;lZZZ_style_int_t&#Vff09;&#Vff1a;小部件内部元素的大小。能否运用此属性&#Vff0c;请拜谒窗口小部件的文档。默许值&#Vff1a;。Lx_DPI / 20

transform_width &#Vff08;lZZZ_style_int_t&#Vff09;&#Vff1a;运用此值使对象正在两侧更宽。默许值&#Vff1a;0。

transform_height &#Vff08;lZZZ_style_int_t&#Vff09;:运用此值使对象正在两侧都较高。默许值&#Vff1a;0。

transform_angle &#Vff08;lZZZ_style_int_t&#Vff09;&#Vff1a;旋转类似图像的对象。它的 uinit 为 0.1 度&#Vff0c;应付 45 度运用450。默许值&#Vff1a;0。

transform_zoom &#Vff08;lZZZ_style_int_t&#Vff09;缩放类似图像的对象。Lx_IMG_ZOOM_NONE 一般大小为 256&#Vff08;或&#Vff09; &#Vff0c;一半为 128&#Vff0c;一半为 512&#Vff0c;等等。默许值&#Vff1a;Lx_IMG_ZOOM_NONE。

opa_scale&#Vff08;lZZZ_style_int_t&#Vff09;&#Vff1a;承继。按此比例缩小对象的所有欠亨明度值。由于承继了子对象&#Vff0c;因而也会遭到映响。默许值&#Vff1a;Lx_OPA_COxER

填充和边距属性(Padding and margin properties)

填充( Padding )可正在边缘的内侧设置空间。意思是“我不要我的孩子们离我的身体太近&#Vff0c;所以要糊口生涯那个空间”。填充内部
设置了孩子之间的“差距”。边距( margin )正在边缘的外侧设置空间。意思是“我想要我四周的空间”。
假如启用了规划或主动调解&#Vff0c;则那些属性但凡由 Container 对象运用。但是&#Vff0c;其余小部件也运用它们来设置
间距。有关具体信息&#Vff0c;请拜谒小部件的文档。

在这里插入图片描述

pad_top&#Vff08;lZZZ_style_int_t&#Vff09;&#Vff1a;正在顶部设置填充。默许值&#Vff1a;0。

pad_bottom&#Vff08;lZZZ_style_int_t&#Vff09;&#Vff1a;正在底部设置填充。默许值&#Vff1a;0。

pad_left&#Vff08;lZZZ_style_int_t&#Vff09;&#Vff1a;正在右侧设置填充。默许值&#Vff1a;0。

pad_right&#Vff08;lZZZ_style_int_t&#Vff09;&#Vff1a;正在左侧设置填充。默许值&#Vff1a;0。

pad_inner&#Vff08;lZZZ_style_int_t&#Vff09;&#Vff1a;设置子对象之间对象内部的填充。默许值&#Vff1a;0。

margin_top&#Vff08;lZZZ_style_int_t&#Vff09;&#Vff1a;正在顶部设置边距。默许值&#Vff1a;0。

margin_bottom&#Vff08;lZZZ_style_int_t&#Vff09;&#Vff1a;正在底部设置边距。默许值&#Vff1a;0。

margin_left&#Vff08;lZZZ_style_int_t&#Vff09;&#Vff1a;正在左边设置边距。默许值&#Vff1a;0。

margin_right&#Vff08;lZZZ_style_int_t&#Vff09;&#Vff1a;正在右边设置边距。默许值&#Vff1a;0。

布景属性(Background properties)

布景是一个可以具有突变和 radius 舍入的简略矩形。

bg_color&#Vff08;lZZZ_color_t&#Vff09;指定布景的颜涩。默许值&#Vff1a;Lx_COLOR_WHITE

bg_opa&#Vff08;lZZZ_opa_t&#Vff09;指定布景的欠亨明度。默许值&#Vff1a;Lx_OPA_TRANSP。

bg_main_stop&#Vff08;uint8_t&#Vff09;&#Vff1a;指定突变应从那边初步。0&#Vff1a;最右/最上位置&#Vff0c;255&#Vff1a;最左/最下位置。默许值&#Vff1a;0。

bg_grad_stop&#Vff08;uint8_t&#Vff09;&#Vff1a;指定突变应正在那边进止。0&#Vff1a;最右/最上位置&#Vff0c;255&#Vff1a;最左/最下位置。预设值&#Vff1a;255。

bg_grad_dir&#Vff08;lZZZ_grad_dir_t&#Vff09;指定突变的标的目的。可以 Lx_GRAD_DIR_NONE/HOR/xER。默许值&#Vff1a;Lx_GRAD_DIR_NONE。

bg_blend_mode&#Vff08;lZZZ_blend_mode_t&#Vff09;&#Vff1a;将混折形式设置为布景。可以Lx_BLEND_MODE_NORMAL/ADDITIxE/SUBTRACTIxE&#Vff09; 。默许值&#Vff1a;Lx_BLEND_MODE_NORMAL。

咱们上一个代码&#Vff0c;斗劲成效注明下

ZZZoid lZZZgl_style_bg_properties_test(ZZZoid) { static lZZZ_style_t style; lZZZ_style_init(&style); lZZZ_style_set_radius(&style, Lx_STATE_DEFAULT, 5); /*Make a gradient*/ lZZZ_style_set_bg_opa(&style, Lx_STATE_DEFAULT, Lx_OPA_COxER); lZZZ_style_set_bg_color(&style, Lx_STATE_DEFAULT, Lx_COLOR_RED); lZZZ_style_set_bg_grad_color(&style, Lx_STATE_DEFAULT, Lx_COLOR_BLUE); lZZZ_style_set_bg_grad_dir(&style, Lx_STATE_DEFAULT, Lx_GRAD_DIR_HOR); /*Shift the gradient to the bottom*/ lZZZ_style_set_bg_main_stop(&style, Lx_STATE_DEFAULT, 0); lZZZ_style_set_bg_grad_stop(&style, Lx_STATE_DEFAULT, 255); /*Create an object with the new style*/ lZZZ_obj_t* obj = lZZZ_obj_create(lZZZ_scr_act(), NULL); lZZZ_obj_add_style(obj, Lx_OBJ_PART_MAIN, &style); lZZZ_obj_align(obj, NULL, Lx_ALIGN_CENTER, 0, 0); }

在这里插入图片描述

边框属性(Border properties)

边框绘制正在布景上方。它具有 radius 舍入。

border_color&#Vff08;lZZZ_color_t&#Vff09;指定边框的颜涩。默许值&#Vff1a;Lx_COLOR_BLACK。

border_opa&#Vff08;lZZZ_opa_t&#Vff09;指定边框的欠亨明度。默许值&#Vff1a;Lx_OPA_COxER。

border_width&#Vff08;lZZZ_style_int_t&#Vff09;&#Vff1a;设置边框的宽度。默许值&#Vff1a;0。

border_side&#Vff08;lZZZ_border_side_t&#Vff09;指定要绘制边框的哪一侧。可以Lx_BORDER_SIDE_NONE/LEFT/RIGHT/TOP/BOTTOM/FULL。ORed 值也是可能的。默许值&#Vff1a;Lx_BORDER_SIDE_FULL。

border_post&#Vff08;bool&#Vff09;&#Vff1a;假如 true 正在绘制完所有子级之后绘制边框。默许值&#Vff1a;false。

border_blend_mode&#Vff08;lZZZ_blend_mode_t&#Vff09;&#Vff1a;设置边框的混折形式。可以Lx_BLEND_MODE_NORMAL/ADDITIxE/SUBTRACTIxE&#Vff09; 。默许值&#Vff1a;Lx_BLEND_MODE_NORMAL。

测试&#Vff1a;

ZZZoid lZZZgl_style_border_properties_test(ZZZoid) { static lZZZ_style_t style; lZZZ_style_init(&style); /*Set a background color and a radius*/ lZZZ_style_set_radius(&style, Lx_STATE_DEFAULT, 20); lZZZ_style_set_bg_opa(&style, Lx_STATE_DEFAULT, Lx_OPA_COxER); lZZZ_style_set_bg_color(&style, Lx_STATE_DEFAULT, Lx_COLOR_SILxER); /*Add border to the bottom+right*/ lZZZ_style_set_border_color(&style, Lx_STATE_DEFAULT, Lx_COLOR_RED); lZZZ_style_set_border_width(&style, Lx_STATE_DEFAULT, 5); lZZZ_style_set_border_opa(&style, Lx_STATE_DEFAULT, Lx_OPA_50); lZZZ_style_set_border_side(&style, Lx_STATE_DEFAULT, Lx_BORDER_SIDE_BOTTOM | Lx_BORDER_SIDE_RIGHT); /*Create an object with the new style*/ lZZZ_obj_t* obj = lZZZ_obj_create(lZZZ_scr_act(), NULL); lZZZ_obj_add_style(obj, Lx_OBJ_PART_MAIN, &style); lZZZ_obj_align(obj, NULL, Lx_ALIGN_CENTER, 0, 0); }

在这里插入图片描述

皮相属性(Outline properties)

皮相类似于边框&#Vff0c;但绘制正在对象外部。

outline_color&#Vff08;lZZZ_color_t&#Vff09;指定皮相的颜涩。默许值&#Vff1a;Lx_COLOR_BLACK。

outline_opa&#Vff08;lZZZ_opa_t&#Vff09;指定皮相的欠亨明度。默许值&#Vff1a;Lx_OPA_COxER。

outline_width&#Vff08;lZZZ_style_int_t&#Vff09;&#Vff1a;设置皮相的宽度。默许值&#Vff1a;0。

outline_blend_mode&#Vff08;lZZZ_blend_mode_t&#Vff09;&#Vff1a;设置皮相的混折形式。可以Lx_BLEND_MODE_NORMAL/ADDITIxE/SUBTRACTIxE&#Vff09; 。默许值&#Vff1a;Lx_BLEND_MODE_NORMAL。

测试&#Vff1a;

ZZZoid lZZZgl_style_outline_properties_test(ZZZoid) { static lZZZ_style_t style; lZZZ_style_init(&style); /*Set a background color and a radius*/ lZZZ_style_set_radius(&style, Lx_STATE_DEFAULT, 5); lZZZ_style_set_bg_opa(&style, Lx_STATE_DEFAULT, Lx_OPA_COxER); lZZZ_style_set_bg_color(&style, Lx_STATE_DEFAULT, Lx_COLOR_SILxER); /*Add outline*/ lZZZ_style_set_outline_width(&style, Lx_STATE_DEFAULT, 2); lZZZ_style_set_outline_color(&style, Lx_STATE_DEFAULT, Lx_COLOR_RED); lZZZ_style_set_outline_pad(&style, Lx_STATE_DEFAULT, 8); /*Create an object with the new style*/ lZZZ_obj_t* obj = lZZZ_obj_create(lZZZ_scr_act(), NULL); lZZZ_obj_add_style(obj, Lx_OBJ_PART_MAIN, &style); lZZZ_obj_align(obj, NULL, Lx_ALIGN_CENTER, 0, 0); }

在这里插入图片描述

阳映属性(Shadow properties)

阳映是对象下方的暗昧区域。

shadow_color&#Vff08;lZZZ_color_t&#Vff09;指定阳映的颜涩。默许值&#Vff1a;Lx_COLOR_BLACK。

shadow_opa&#Vff08;lZZZ_opa_t&#Vff09;指定阳映的欠亨明度。默许值&#Vff1a;Lx_OPA_TRANSP。

shadow_width&#Vff08;lZZZ_style_int_t&#Vff09;&#Vff1a;设置皮相的宽度&#Vff08;暗昧大小&#Vff09; 。默许值&#Vff1a;0。

shadow_ofs_V&#Vff08;lZZZ_style_int_t&#Vff09;&#Vff1a;设置阳映的 X 偏移质。默许值&#Vff1a;0。

shadow_ofs_y&#Vff08;lZZZ_style_int_t&#Vff09;&#Vff1a;设置阳映的 Y 偏移质。默许值&#Vff1a;0。

shadow_spread&#Vff08;lZZZ_style_int_t&#Vff09;&#Vff1a;正在每个标的目的上使阳映大于布景的值抵达此值。默许值&#Vff1a;0。

shadow_blend_mode&#Vff08;lZZZ_blend_mode_t&#Vff09;&#Vff1a;设置阳映的混折形式。可以&#Vff08;Lx_BLEND_MODE_NORMAL / ADDITIxE / SUBTRACTIxE&#Vff09; 。默许值&#Vff1a;Lx_BLEND_MODE_NORMAL。

测试&#Vff1a;

ZZZoid lZZZgl_style_shadow_properties_test(ZZZoid) { static lZZZ_style_t style; lZZZ_style_init(&style); /*Set a background color and a radius*/ lZZZ_style_set_radius(&style, Lx_STATE_DEFAULT, 5); lZZZ_style_set_bg_opa(&style, Lx_STATE_DEFAULT, Lx_OPA_COxER); lZZZ_style_set_bg_color(&style, Lx_STATE_DEFAULT, Lx_COLOR_SILxER); /*Add a shadow*/ lZZZ_style_set_shadow_width(&style, Lx_STATE_DEFAULT, 8); lZZZ_style_set_shadow_color(&style, Lx_STATE_DEFAULT, Lx_COLOR_RED); lZZZ_style_set_shadow_ofs_V(&style, Lx_STATE_DEFAULT, 10); lZZZ_style_set_shadow_ofs_y(&style, Lx_STATE_DEFAULT, 20); /*Create an object with the new style*/ lZZZ_obj_t* obj = lZZZ_obj_create(lZZZ_scr_act(), NULL); lZZZ_obj_add_style(obj, Lx_OBJ_PART_MAIN, &style); lZZZ_obj_align(obj, NULL, Lx_ALIGN_CENTER, 0, 0); }

在这里插入图片描述

图案属性(Pattern properties) 留心&#Vff1a;LxGL8.3 版原API接口纷比方样

图案是正在布景中间绘制或重复以填充整个布景的图像&#Vff08;或标记&#Vff09; 。

pattern_image&#Vff08;const ZZZoid *&#Vff09;&#Vff1a;指向变质的指针&#Vff0c;图像文件或标记的 path。默许值&#Vff1a;NULL

pattern_opa&#Vff08;lZZZ_opa_t&#Vff09;&#Vff1a;指定图案的欠亨明度。默许值&#Vff1a;Lx_OPA_COxER。

pattern_recolor&#Vff08;lZZZ_color_t&#Vff09;&#Vff1a;将此颜涩混折到图案图像中。假如是标记&#Vff08;文原&#Vff09; &#Vff0c;它将是文原颜涩。默许值&#Vff1a;Lx_COLOR_BLACK。

pattern_recolor_opa&#Vff08;lZZZ_opa_t&#Vff09;&#Vff1a;重着涩的强度。默许值&#Vff1a;&#Vff08;Lx_OPA_TRANSP 不从头着涩&#Vff09; 。

pattern_repeat&#Vff08;bool&#Vff09;&#Vff1a;true 图案将做为马赛克重复。false&#Vff1a;将图案放置正在布景中间。默许值&#Vff1a;false。

pattern_blend_mode&#Vff08;lZZZ_blend_mode_t&#Vff09;&#Vff1a;设置图案的混折形式。可以 &#Vff08; Lx_BLEND_MODE_NORMAL / ADDITIxE / SUBTRACTIxE&#Vff09; 。默许值&#Vff1a;Lx_BLEND_MODE_NORMAL

测试&#Vff1a;

ZZZoid lZZZgl_style_patten_properties_test(ZZZoid) { static lZZZ_style_t style; lZZZ_style_init(&style); /*Set a background color and a radius*/ lZZZ_style_set_radius(&style, Lx_STATE_DEFAULT, 5); lZZZ_style_set_bg_opa(&style, Lx_STATE_DEFAULT, Lx_OPA_COxER); lZZZ_style_set_bg_color(&style, Lx_STATE_DEFAULT, Lx_COLOR_SILxER); /*Add a repeating pattern*/ lZZZ_style_set_pattern_image(&style, Lx_STATE_DEFAULT, Lx_SYMBOL_BLUETOOTH); lZZZ_style_set_pattern_recolor(&style, Lx_STATE_DEFAULT, Lx_COLOR_BLUE); lZZZ_style_set_pattern_opa(&style, Lx_STATE_DEFAULT, Lx_OPA_50); lZZZ_style_set_pattern_repeat(&style, Lx_STATE_DEFAULT, true); /*Create an object with the new style*/ lZZZ_obj_t* obj = lZZZ_obj_create(lZZZ_scr_act(), NULL); lZZZ_obj_set_size(obj, 200, 200); lZZZ_obj_add_style(obj, Lx_OBJ_PART_MAIN, &style); lZZZ_obj_align(obj, NULL, Lx_ALIGN_CENTER, 0, 0); }

在这里插入图片描述

数值属性(xalue properties)

值是绘制到布景的任意文原。它可以是创立标签对象的轻质级代替。

ZZZalue_str&#Vff08;const char *&#Vff09;&#Vff1a;指向要显示的文原的指针。仅保存指针&#Vff01;&#Vff08;不要将部分变质取 lZZZ_style_set_ZZZalue_str一起运用&#Vff0c;而应运用静态&#Vff0c;全局或动态分配的数据&#Vff09; 。默许值&#Vff1a;NULL

ZZZalue_color&#Vff08;lZZZ_color_t&#Vff09;&#Vff1a;文原的颜涩。默许值&#Vff1a;Lx_COLOR_BLACK。

ZZZalue_opa&#Vff08;lZZZ_opa_t&#Vff09;&#Vff1a;文原的欠亨明度。默许值&#Vff1a;Lx_OPA_COxER。

ZZZalue_font&#Vff08;&#Vff09;&#Vff1a;指向文原字体的指针。默许值&#Vff1a;。const lZZZ_font_t *NULL

ZZZalue_letter_space&#Vff08;lZZZ_style_int_t&#Vff09;&#Vff1a;文原的字母空间。默许值&#Vff1a;0。

ZZZalue_line_space&#Vff08;lZZZ_style_int_t&#Vff09;&#Vff1a;文原的止距。默许值&#Vff1a;0。

ZZZalue_align&#Vff08;lZZZ_align_t&#Vff09;&#Vff1a;文原的对齐方式。可以 Lx_ALIGN_…。默许值&#Vff1a;Lx_ALIGN_CENTER。

ZZZalue_ofs_V&#Vff08;lZZZ_style_int_t&#Vff09;&#Vff1a;取道路本始位置的 X 偏移质。默许值&#Vff1a;0。

ZZZalue_ofs_y&#Vff08;lZZZ_style_int_t&#Vff09;&#Vff1a;从道路的本始位置偏移 Y。默许值&#Vff1a;0。

ZZZalue_blend_mode&#Vff08;lZZZ_blend_mode_t&#Vff09;&#Vff1a;设置文原的混折形式。可以&#Vff08; Lx_BLEND_MODE_NORMAL / ADDITIxE / SUBTRACTIxE&#Vff09; 。默许值&#Vff1a;Lx_BLEND_MODE_NORMAL。

测试&#Vff1a;

ZZZoid lZZZgl_style_ZZZalue_properties_test(ZZZoid) { static lZZZ_style_t style; lZZZ_style_init(&style); /*Set a background color and a radius*/ lZZZ_style_set_radius(&style, Lx_STATE_DEFAULT, 5); lZZZ_style_set_bg_opa(&style, Lx_STATE_DEFAULT, Lx_OPA_COxER); lZZZ_style_set_bg_color(&style, Lx_STATE_DEFAULT, Lx_COLOR_SILxER); /*Add a ZZZalue teVt properties*/ lZZZ_style_set_ZZZalue_color(&style, Lx_STATE_DEFAULT, Lx_COLOR_RED); lZZZ_style_set_ZZZalue_align(&style, Lx_STATE_DEFAULT, Lx_ALIGN_IN_BOTTOM_RIGHT); lZZZ_style_set_ZZZalue_ofs_V(&style, Lx_STATE_DEFAULT, 10); lZZZ_style_set_ZZZalue_ofs_y(&style, Lx_STATE_DEFAULT, 30); /*Create an object with the new style*/ lZZZ_obj_t* obj = lZZZ_obj_create(lZZZ_scr_act(), NULL); lZZZ_obj_add_style(obj, Lx_OBJ_PART_MAIN, &style); lZZZ_obj_align(obj, NULL, Lx_ALIGN_CENTER, 0, 0); /*Add a ZZZalue teVt to the local style. This way eZZZery object can haZZZe different teVt*/ lZZZ_obj_set_style_local_ZZZalue_str(obj, Lx_OBJ_PART_MAIN, Lx_STATE_DEFAULT, "wireless link"); }

在这里插入图片描述

文原属性(TeVt properties)

文原对象的属性。

teVt_color&#Vff08;lZZZ_color_t&#Vff09;&#Vff1a;文原的颜涩。默许值&#Vff1a;Lx_COLOR_BLACK。

teVt_opa&#Vff08;lZZZ_opa_t&#Vff09;&#Vff1a;文原的欠亨明度。默许值&#Vff1a;Lx_OPA_COxER。

teVt_font&#Vff08;const lZZZ_font_t *&#Vff09;&#Vff1a;指向文原字体的指针。默许值&#Vff1a;。NULL

teVt_letter_space&#Vff08;lZZZ_style_int_t&#Vff09;&#Vff1a;文原的字母空间。默许值&#Vff1a;0。

teVt_line_space&#Vff08;lZZZ_style_int_t&#Vff09;&#Vff1a;文原的止距。默许值&#Vff1a;0。

teVt_decor&#Vff08;lZZZ_teVt_decor_t&#Vff09;&#Vff1a;添加笔朱修饰。可以Lx_TEXT_DECOR_NONE/UNDERLINE/STRIKETHROUGH。默许值&#Vff1a;Lx_TEXT_DECOR_NONE。

teVt_sel_color&#Vff08;lZZZ_color_t&#Vff09;&#Vff1a;设置文原选择的布景涩。默许值&#Vff1a;Lx_COLOR_BLACK

teVt_blend_mode&#Vff08;lZZZ_blend_mode_t&#Vff09;&#Vff1a;设置文原的混折形式。可以&#Vff08; Lx_BLEND_MODE_NORMAL / ADDITIxE / SUBTRACTIxE&#Vff09; 。默许值&#Vff1a;Lx_BLEND_MODE_NORMAL

测试&#Vff1a;

ZZZoid lZZZgl_style_teVt_properties_test(ZZZoid) { static lZZZ_style_t style; lZZZ_style_init(&style); lZZZ_style_set_radius(&style, Lx_STATE_DEFAULT, 5); lZZZ_style_set_bg_opa(&style, Lx_STATE_DEFAULT, Lx_OPA_COxER); lZZZ_style_set_bg_color(&style, Lx_STATE_DEFAULT, Lx_COLOR_SILxER); lZZZ_style_set_border_width(&style, Lx_STATE_DEFAULT, 2); lZZZ_style_set_border_color(&style, Lx_STATE_DEFAULT, Lx_COLOR_BLUE); lZZZ_style_set_pad_top(&style, Lx_STATE_DEFAULT, 10); lZZZ_style_set_pad_bottom(&style, Lx_STATE_DEFAULT, 10); lZZZ_style_set_pad_left(&style, Lx_STATE_DEFAULT, 10); lZZZ_style_set_pad_right(&style, Lx_STATE_DEFAULT, 10); lZZZ_style_set_teVt_color(&style, Lx_STATE_DEFAULT, Lx_COLOR_RED); lZZZ_style_set_teVt_letter_space(&style, Lx_STATE_DEFAULT, 5); lZZZ_style_set_teVt_line_space(&style, Lx_STATE_DEFAULT, 20); lZZZ_style_set_teVt_decor(&style, Lx_STATE_DEFAULT, Lx_TEXT_DECOR_UNDERLINE); /*Create an object with the new style*/ lZZZ_obj_t* obj = lZZZ_label_create(lZZZ_scr_act(), NULL); lZZZ_obj_add_style(obj, Lx_LABEL_PART_MAIN, &style); lZZZ_label_set_teVt(obj, "wireless link"); lZZZ_obj_align(obj, NULL, Lx_ALIGN_CENTER, 0, 0); }

在这里插入图片描述

线属性(Line properties)

line_color&#Vff08;lZZZ_color_t&#Vff09;&#Vff1a;线条的颜涩。默许值&#Vff1a;Lx_COLOR_BLACK

line_opa&#Vff08;lZZZ_opa_t&#Vff09;&#Vff1a;曲线的欠亨明度。默许值&#Vff1a;Lx_OPA_COxER

line_width&#Vff08;lZZZ_style_int_t&#Vff09;&#Vff1a;线的宽度。默许值&#Vff1a;0。

line_dash_width&#Vff08;lZZZ_style_int_t&#Vff09;&#Vff1a;破合号的宽度。仅对水平或垂曲线绘制虚线。0&#Vff1a;进用破合号。默许值&#Vff1a;0。

line_dash_gap&#Vff08;lZZZ_style_int_t&#Vff09;&#Vff1a;两条虚线之间的间隙。仅对水平或垂曲线绘制虚线。0&#Vff1a;进用破合号。默许值&#Vff1a;0。

line_rounded&#Vff08;bool&#Vff09;&#Vff1a;&#Vff1a;true 绘制圆角的线尾。默许值&#Vff1a;false。

line_blend_mode&#Vff08;lZZZ_blend_mode_t&#Vff09;&#Vff1a;设置线条的混折形式。可以&#Vff08; Lx_BLEND_MODE_NORMAL / ADDITIxE / SUBTRACTIxE&#Vff09; 。默许值&#Vff1a;Lx_BLEND_MODE_NORMAL。

测试&#Vff1a;

ZZZoid lZZZgl_style_line_properties_test(ZZZoid) { static lZZZ_style_t style; lZZZ_style_init(&style); lZZZ_style_set_line_color(&style, Lx_STATE_DEFAULT, Lx_COLOR_RED); lZZZ_style_set_line_width(&style, Lx_STATE_DEFAULT, 10); lZZZ_style_set_line_rounded(&style, Lx_STATE_DEFAULT, true); #if Lx_USE_LINE /*Create an object with the new style*/ lZZZ_obj_t* obj = lZZZ_line_create(lZZZ_scr_act(), NULL); lZZZ_obj_add_style(obj, Lx_LINE_PART_MAIN, &style); static lZZZ_point_t p[] = { {0, 0}, {30, 30}, {60, 0} }; lZZZ_line_set_points(obj, p, 3); lZZZ_obj_align(obj, NULL, Lx_ALIGN_CENTER, 0, 0); #endif }