按照官网学习顺序，下学一下LVGL的款式。
先看lv_example_style_1()。代码如下，稍作修改：
void lv_example_style_1(void)
{
static lv_style_t style;
lv_style_init(&style);
lv_style_set_radius(&style, 10);
lv_style_set_text_font(&style, &lv_font_montserrat_48);
/*Make a gradient*/
lv_style_set_width(&style, LV_SIZE_CONTENT);
lv_style_set_height(&style, LV_SIZE_CONTENT);
lv_style_set_pad_ver(&style, 50);
lv_style_set_pad_left(&style, 50);
lv_style_set_x(&style, lv_pct(20));
lv_style_set_y(&style, lv_pct(40));
/*Create an object with the new style*/
lv_obj_t * obj = lv_obj_create(lv_scr_act());
lv_obj_add_style(obj, &style, 0);
lv_obj_t * label = lv_label_create(obj);
lv_label_set_text_fmt(label, "Hello style test %d", lv_pct(100));
}
演示效果如下：
![]()
学习点：
LV_SIZE_CONTENT在设置这个会议大小的时候，可以用 LVGL 自己选择安排其中内容的大小。
lv_style_set_pad_xxx()可以设置控件内部某方位的边界范围。
lv_pct()展开代码给定的范围是0~1000 (x < 0 ? ((1000 - (x)) | (1 << (13U))) : ((x) | (1 << (13U))))。所以我在中打印的代码为lv_pct(100)8292（100 | 100）。8192）感觉屏幕看这个值没什么意义，1 << 13U具体到具体的函数会设置一个标志位。值而你的时间，是按照屏幕的纵向高度计算的值。内部会自动设置。
lv_example_style_2()代码如下，稍作修改：播放学习。
void lv_example_style_2(void)
{
static lv_style_t style;
lv_style_init(&style);
lv_style_set_radius(&style, 5);
/*Make a gradient*/
lv_style_set_bg_opa(&style, LV_OPA_COVER);
static lv_grad_dsc_t grad;
grad.dir = LV_GRAD_DIR_VER;
grad.stops_count = 3;
grad.stops[0].color = lv_palette_lighten(LV_PALETTE_GREY, 1);
grad.stops[1].color = lv_palette_main(LV_PALETTE_BLUE);
grad.stops[2].color = lv_palette_main(LV_PALETTE_RED);
/*Shift the gradient to the bottom*/
grad.stops[0].frac = 128;
grad.stops[1].frac = 192;
grad.stops[2].frac = 220;
lv_style_set_bg_grad(&style, &grad);
lv_style_set_size(&style, lv_pct(50));
/*Create an object with the new style*/
lv_obj_t * obj = lv_obj_create(lv_scr_act());
lv_obj_add_style(obj, &style, 0);
lv_obj_center(obj);
}
演示效果如下：
![]()
学习点：
在这里设置了0~255个分级的细分位置。停止最大数量的宏LV_GRADIENT_MAX_STOPS修改这个宏2。设置更大2的品种，要先看看。
内部会自动区分lv_pct()水平和纵向尺寸。
原样例程并lv_example_style_3()没有什么好说的对控制方加的方式，只是给自己一个主要看下的一个示例，并且给一个示例添加了一个示例，实现一个属性的颜色的文本。 。但没能实现。倒是可以给标签的背景色添加渐变。
void lv_example_style_3(void)
{
static lv_style_t style, grad_style;
lv_style_init(&style);
/*Set a background color and a radius*/
lv_style_set_radius(&style, 10);
lv_style_set_bg_opa(&style, LV_OPA_COVER);
lv_style_set_bg_color(&style, lv_palette_lighten(LV_PALETTE_ORANGE, 1));
static lv_grad_dsc_t grad;
grad.dir = LV_GRAD_DIR_HOR;
grad.stops_count = 2;
grad.stops[0].color = lv_palette_user(LV_PALETTE_GREEN);
grad.stops[1].color = lv_palette_user(LV_PALETTE_YELLOW);
grad.stops[0].frac = 80;
grad.stops[1].frac = 160;
lv_style_set_bg_grad(&grad_style, &grad);
lv_style_set_text_color(&grad_style, lv_palette_user(LV_PALETTE_BLUE));
// lv_style_set_bg_opa(&grad_style, LV_OPA_COVER);
static lv_text_decor_t decor;
lv_style_set_text_decor(&grad_style, LV_TEXT_DECOR_UNDERLINE);
/*Add border to the bottom+right*/
lv_style_set_border_color(&style, lv_palette_main(LV_PALETTE_BLUE));
lv_style_set_border_width(&style, 10);
lv_style_set_border_opa(&style, LV_OPA_50);
lv_style_set_border_side(&style, LV_BORDER_SIDE_BOTTOM | LV_BORDER_SIDE_RIGHT);
lv_style_set_size(&style, lv_pct(50));
/*Create an object with the new style*/
lv_obj_t * obj = lv_obj_create(lv_scr_act());
lv_obj_add_style(obj, &style, 0);
lv_obj_add_style(obj, &grad_style, 0);
lv_obj_center(obj);
lv_obj_t *label = lv_label_create(obj);
lv_label_set_text(label, "label test text.");
lv_obj_center(label);
lv_obj_add_style(label, &grad_style,LV_STYLE_PROP_INV);
lv_obj_set_style_text_font(label, &lv_font_montserrat_48, 0);
}
演示效果如下：
![]()
学习点：
1、给控件添加边框。
2、自己写代码才注意到的小细节。它的风格结构变量，必须声明是程序不会发生等变化的。或者要保存一直存在，不会被释放。 obj里面的style属性的时候，只是添加了也给了标签等无标记。
3，还有一个小细节。在想label里面的textgrad 无果后，就想试试背景色添加grad。发现添加上去反应。是因为默认的label的背景色都是透明的（也应该这样）。想自己添加的bg_grad有效果。必须修改opa属性，显示背景色。
再来看一个lv_example_style_4()例子，主要例子是给控件添加这个外部代码。如下：
void lv_example_style_4(void)
{
static lv_style_t style;
lv_style_init(&style);
/*Set a background color and a radius*/
lv_style_set_radius(&style, 20);
lv_style_set_bg_opa(&style, LV_OPA_COVER);
lv_style_set_bg_color(&style, lv_palette_lighten(LV_PALETTE_GREY, 1));
/*Add outline*/
lv_style_set_outline_width(&style, 4);
lv_style_set_outline_color(&style, lv_palette_main(LV_PALETTE_BLUE));
lv_style_set_outline_pad(&style, 18);
/*Create an object with the new style*/
lv_obj_t * obj = lv_obj_create(lv_scr_act());
lv_obj_add_style(obj, &style, 0);
lv_obj_center(obj);
lv_obj_set_size(obj, LV_HOR_RES/2, LV_VER_RES/2);
}
视频效果如下：
![]()
1
，给控件圆边框外。修改边框宽度和距离宽度。
2，外边学习边框的半径。
看看这个lv_example_style_5()例子是演示控件的影子在旁边重复习习抄写封面和下面的一个效果。
void lv_example_style_5(void)
{
static lv_style_t style;
lv_style_init(&style);
/*Set a background color and a radius*/
lv_style_set_radius(&style, 20);
lv_style_set_bg_opa(&style, LV_OPA_COVER);
lv_style_set_bg_color(&style, lv_palette_lighten(LV_PALETTE_GREY, 1));
lv_style_set_size(&style, lv_pct(50));
/*Add a shadow*/
lv_style_set_shadow_width(&style, 100);
lv_style_set_shadow_color(&style, lv_palette_main(LV_PALETTE_BLUE));
lv_style_set_shadow_ofs_x(&style, 10);
lv_style_set_shadow_ofs_y(&style, 20);
lv_style_set_outline_width(&style, 10);
lv_style_set_outline_color(&style, lv_palette_user(LV_PALETTE_RED));
lv_style_set_outline_pad(&style, 60);
/*Create an object with the new style*/
lv_obj_t * obj = lv_obj_create(lv_scr_act());
lv_obj_add_style(obj, &style, 0);
lv_obj_center(obj);
}
演示效果如下：更改
![]()
点：
1，为学习控件并设置添加的填充，阴影，以及自动偏移颜色等圆的属性。
2，角属性也可以根据样式的半径。
这个lv_example_style_6()例子程是如何把视频播放到控制台上显示的图片。不过是直接取模，存代码里的。后面从文件系统里面导入图片的时候再看具体格式的对联。
void lv_example_style_6(void)
{
static lv_style_t style, img_style;
lv_style_init(&style);
/*Set a background color and a radius*/
lv_style_set_radius(&style, 20);
lv_style_set_bg_opa(&style, LV_OPA_COVER);
lv_style_set_bg_color(&style, lv_palette_lighten(LV_PALETTE_GREY, 3));
lv_style_set_border_width(&style, 10);
lv_style_set_border_color(&style, lv_palette_main(LV_PALETTE_BLUE));
lv_style_set_img_recolor(&img_style, lv_palette_main(LV_PALETTE_BLUE));
lv_style_set_img_recolor_opa(&img_style, LV_OPA_50);
lv_style_set_transform_angle(&img_style, 200);
// lv_style_set_transform_zoom(&img_style, 400);
/*Create an object with the new style*/
lv_obj_t * obj = lv_img_create(lv_scr_act());
lv_obj_add_style(obj, &style, 0);
lv_obj_add_style(obj, &img_style, 0);
LV_IMG_DECLARE(animimg001);
lv_img_set_src(obj, &animimg001);
lv_obj_center(obj);
}
![]()
学习点如下：
1，如何在显示器上显示图片。
2，如何更改图片的角度，并放缩小图片。
3，但有一个，我暂时无法解决。如果设置了放大图片的话，通常样式里面的设置也样式被覆盖掉。另外两个效果一样。
这个lv_example_style_7()示例演示了圆弧控件和圆弧控件的样式。但是，就可以显示圆弧控件，圆弧控件可以自带一个圆弧控件，可以认为是一个圆弧控件。把这个代码的值写出来显示出来。
lv_obj_t *label;
void test_event_cb(lv_event_t *e)
{
lv_obj_t *obj = lv_event_get_target(e);
int16_t val = lv_arc_get_value(obj);
rt_kprintf("%d
", val);
lv_label_set_text_fmt(label, "%d", val);
}
void lv_example_style_7(void)
{
static lv_style_t style;
lv_style_init(&style);
lv_style_set_arc_color(&style, lv_palette_main(LV_PALETTE_RED));
lv_style_set_arc_width(&style, 8);
lv_style_set_size(&style, 400);
lv_style_set_bg_color(&style, lv_palette_main(LV_PALETTE_GREEN));
/*Create an object with the new style*/
lv_obj_t * obj = lv_arc_create(lv_scr_act());
lv_obj_add_style(obj, &style, 0);
lv_obj_center(obj);
lv_arc_set_bg_angles(obj, 180, 360);
lv_arc_set_range(obj, -100, 100);
lv_arc_set_value(obj, 10);
label = lv_label_create(obj);
lv_obj_center(label);
lv_obj_set_style_text_font(label, &lv_font_montserrat_48, 0);
lv_obj_set_style_text_color(label, lv_palette_user(LV_PALETTE_BLUE), 0);
lv_label_set_text_fmt(label, "10");
lv_obj_set_style_text_decor(label, LV_TEXT_DECOR_UNDERLINE, 0);
lv_obj_add_event_cb(obj, test_event_cb, LV_EVENT_PRESSING, NULL);
}
效果如下：
![]()
学习点：
1，arc控件的使用，以及属性的演示设置。
2，设置角度，用lv_arc_set_bg_angles()函数接口，不是lv_arc_set_angles()接口。这个函数设置什么的，暂时没有过多的研究。
lv_example_style_8()的程，主要展示相关的风格设置。背景，颜色，除了标签，包括颜色行等。
void lv_example_style_8(void)
{
static lv_style_t style;
lv_style_init(&style);
lv_style_set_radius(&style, 20);
lv_style_set_bg_opa(&style, LV_OPA_COVER);
lv_style_set_bg_color(&style, lv_palette_lighten(LV_PALETTE_GREY, 2));
lv_style_set_border_width(&style, 5);
lv_style_set_border_color(&style, lv_palette_main(LV_PALETTE_BLUE));
lv_style_set_pad_all(&style, 50);
lv_style_set_text_color(&style, lv_palette_main(LV_PALETTE_BLUE));
lv_style_set_text_letter_space(&style, 5);
lv_style_set_text_line_space(&style, 20);
lv_style_set_text_decor(&style, LV_TEXT_DECOR_UNDERLINE);
lv_style_set_text_font(&style, &lv_font_montserrat_48);
/*Create an object with the new style*/
lv_obj_t * obj = lv_label_create(lv_scr_act());
lv_obj_add_style(obj, &style, 0);
lv_label_set_text(obj, "Text of
"
"a label");
lv_obj_center(obj);
}
演示效果如下：
![]()
学习点：
1，label相关的属性设置。
lv_example_style_9()例程演示是画线功能。涉及到连线的结构类型，以及相关的风格。
void lv_example_style_9(void)
{
static lv_style_t style;
lv_style_init(&style);
lv_style_set_line_color(&style, lv_palette_user(LV_PALETTE_BLUE));
lv_style_set_line_width(&style, 10);
lv_style_set_line_rounded(&style, true);
/*Create an object with the new style*/
lv_obj_t * obj = lv_line_create(lv_scr_act());
lv_obj_add_style(obj, &style, 0);
static lv_point_t p[] = {{0, 150}, {200, 300}, {600, 0}};
lv_line_set_points(obj, p, 3);
lv_obj_center(obj);
}
演示如下：
![]()
点：
1、圆弧结构的设置及相关风格设置。
2、圆弧段设置为使图形真实的效果，以学习圆的形式呈现，以填充。
3、线段更定属性的使用方式，要保持不释放否则造成失败。
lv_example_style_10()函数演示了 LVGL 的动画效果有发现。LVGL 的动画有 7 种，包括通过测试，包括线性，擦入，擦出，擦出，过渡变化，弹跳和分步。但还是不要设置动画太复杂了，不然动画渲染需要的计算量，CPU吃不消。测试中，在原来的基础上，加上shadow和size属性，就很卡了，CPU占用率直接飙升到99% 。
void lv_example_style_10(void)
{
static const lv_style_prop_t props[] = {LV_STYLE_BG_COLOR, LV_STYLE_BORDER_COLOR, LV_STYLE_BORDER_WIDTH, LV_STYLE_SHADOW_COLOR,
LV_STYLE_SHADOW_WIDTH, LV_STYLE_WIDTH, LV_STYLE_HEIGHT, 0};
/* A default transition
* Make it fast (100ms) and start with some delay (200 ms)*/
static lv_style_transition_dsc_t trans_def;
lv_style_transition_dsc_init(&trans_def, props, lv_anim_path_ease_in, 100, 400, NULL);
/* A special transition when going to pressed state
* Make it slow (500 ms) but start without delay*/
static lv_style_transition_dsc_t trans_pr;
lv_style_transition_dsc_init(&trans_pr, props, lv_anim_path_ease_out, 1000, 0, NULL);
static lv_style_t style_def;
lv_style_init(&style_def);
lv_style_set_transition(&style_def, &trans_def);
static lv_style_t style_pr;
lv_style_init(&style_pr);
lv_style_set_bg_color(&style_pr, lv_palette_main(LV_PALETTE_RED));
lv_style_set_border_width(&style_pr, 6);
lv_style_set_border_color(&style_pr, lv_palette_darken(LV_PALETTE_RED, 3));
lv_style_set_transition(&style_pr, &trans_pr);
lv_style_set_shadow_color(&style_pr, lv_palette_user(LV_PALETTE_BLUE));
lv_style_set_shadow_width(&style_pr, 500);
lv_style_set_width(&style_pr, 300);
lv_style_set_height(&style_pr, 300);
/*Create an object with the new style_pr*/
lv_obj_t * obj = lv_obj_create(lv_scr_act());
lv_obj_add_style(obj, &style_def, 0);
lv_obj_add_style(obj, &style_pr, LV_STATE_PRESSED);
lv_obj_center(obj);
}
演示效果如下：
![]()
学习点：
1，如何为控件添加动画效果。
lv_example_style_11()其实这个过程中主要是在玩这个过程中的正常功能，接口用过。
void lv_example_style_11(void)
{
/*A base style*/
static lv_style_t style_base;
lv_style_init(&style_base);
lv_style_set_bg_color(&style_base, lv_palette_main(LV_PALETTE_LIGHT_BLUE));
lv_style_set_border_color(&style_base, lv_palette_darken(LV_PALETTE_LIGHT_BLUE, 3));
lv_style_set_border_width(&style_base, 2);
lv_style_set_radius(&style_base, 10);
lv_style_set_shadow_width(&style_base, 50);
lv_style_set_shadow_ofs_y(&style_base, 5);
lv_style_set_shadow_opa(&style_base, LV_OPA_50);
lv_style_set_text_color(&style_base, lv_color_white());
lv_style_set_width(&style_base, LV_SIZE_CONTENT);
lv_style_set_height(&style_base, LV_SIZE_CONTENT);
lv_style_set_text_font(&style_base, &lv_font_montserrat_48);
/*Set only the properties that should be different*/
static lv_style_t style_warning;
lv_style_init(&style_warning);
lv_style_set_bg_color(&style_warning, lv_palette_main(LV_PALETTE_YELLOW));
lv_style_set_border_color(&style_warning, lv_palette_darken(LV_PALETTE_YELLOW, 3));
lv_style_set_text_color(&style_warning, lv_palette_darken(LV_PALETTE_YELLOW, 4));
/*Create an object with the base style only*/
lv_obj_t * obj_base = lv_obj_create(lv_scr_act());
lv_obj_add_style(obj_base, &style_base, 0);
lv_obj_align(obj_base, LV_ALIGN_LEFT_MID, 20, 0);
lv_obj_t * label = lv_label_create(obj_base);
lv_label_set_text(label, "Base");
lv_obj_center(label);
/*Create another object with the base style and earnings style too*/
lv_obj_t * obj_warning = lv_obj_create(lv_scr_act());
lv_obj_add_style(obj_warning, &style_base, 0);
lv_obj_add_style(obj_warning, &style_warning, 0);
lv_obj_align(obj_warning, LV_ALIGN_RIGHT_MID, -20, 0);
label = lv_label_create(obj_warning);
lv_label_set_text(label, "Warning");
lv_obj_center(label);
}
演示如下： 1， 2多种
![]()
学习
风格的使用。 使用函数接口设置控件的布局是一个不错的选择。 比自己的设置x，y坐标要灵活的多点。 布局器的感觉。
lv_obj_align()
lv_example_style_12()例程比较，主要设置演示使用了当地的简单风格。
void lv_example_style_12(void)
{
static lv_style_t style;
lv_style_init(&style);
lv_style_set_bg_color(&style, lv_palette_main(LV_PALETTE_GREEN));
lv_style_set_border_color(&style, lv_palette_lighten(LV_PALETTE_GREEN, 3));
lv_style_set_border_width(&style, 5);
lv_style_set_size(&style, lv_pct(50));
lv_obj_t * obj = lv_obj_create(lv_scr_act());
lv_obj_add_style(obj, &style, 0);
/*Overwrite the background color locally*/
lv_obj_set_style_bg_color(obj,lv_palette_main(LV_PALETTE_ORANGE), LV_PART_MAIN);
lv_obj_center(obj);
}
显示方式如下：
![]()
点无关： 2，使用本地加载
方式。
2，设置属性设置样式，添加样式，学习方式，本地化的覆盖方式。
lv_example_style_13()例程演示的控件的某些之前的某些颜色或者之前的解决问题，也就是我之前的风格。只是在把 GL 广泛应用的地方设置为三个地方：在 PART 中定义的一个特别的例子，说明了。举起定义和样式13的示例程代码如下：
/**
* The possible parts of widgets.
* The parts can be considered as the internal building block of the widgets.
* E.g. slider = background + indicator + knob
* Note every part is used by every widget
*/
enum {
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*/
LV_PART_CUSTOM_FIRST = 0x080000, /**< Extension point for custom widgets*/
LV_PART_ANY = 0x0F0000, /**< Special value can be used in some functions to target all parts*/
};
typedef uint32_t lv_part_t;
void lv_example_style_13(void)
{
static lv_style_t style_indic;
lv_style_init(&style_indic);
lv_style_set_bg_color(&style_indic, lv_palette_lighten(LV_PALETTE_RED, 3));
lv_style_set_bg_grad_color(&style_indic, lv_palette_main(LV_PALETTE_RED));
lv_style_set_bg_grad_dir(&style_indic, LV_GRAD_DIR_HOR);
static lv_style_t style_knob;
lv_style_init(&style_knob);
static lv_grad_dsc_t grad;
grad.dir = LV_GRAD_DIR_HOR;
grad.stops_count = 1;
grad.stops[0].color = lv_palette_user(LV_PALETTE_YELLOW);
lv_style_set_bg_grad(&style_knob, &grad);
static lv_style_t style_indic_pr;
lv_style_init(&style_indic_pr);
lv_style_set_shadow_color(&style_indic_pr, lv_palette_main(LV_PALETTE_RED));
lv_style_set_shadow_width(&style_indic_pr, 10);
lv_style_set_shadow_spread(&style_indic_pr, 3);
/*Create an object with the new style_pr*/
lv_obj_t * obj = lv_slider_create(lv_scr_act());
lv_obj_add_style(obj, &style_indic, LV_PART_INDICATOR);
lv_obj_add_style(obj, &style_indic_pr, LV_PART_INDICATOR | LV_STATE_PRESSED);
lv_obj_add_style(obj, &style_knob, LV_PART_KNOB);
lv_slider_set_value(obj, 70, LV_ANIM_OFF);
lv_obj_center(obj);
lv_obj_set_style_width(obj, lv_pct(70), 0);
}
演示如下：
![]()
学习点：
1，使用 PART 和 E 参数，指定为部分状态设置样式；
2，PART 参数是不能使用或选择多个效果的。而某个状态是可以使用或单独的。
lv_example_style_14()是风格的最后一个过程示例。演示了如何改变主题，以及切换主题时候的风格的表现。可以在针对主题的函数中提交适合新主题的等加载操作。
static lv_style_t style_btn;
/*Will be called when the styles of the base theme are already added
to add new styles*/
static void new_theme_apply_cb(lv_theme_t * th, lv_obj_t * obj)
{
LV_UNUSED(th);
if(lv_obj_check_type(obj, &lv_btn_class)) {
lv_obj_add_style(obj, &style_btn, 0);
}
}
static void new_theme_init_and_set(void)
{
/*Initialize the styles*/
lv_style_init(&style_btn);
lv_style_set_bg_color(&style_btn, lv_palette_main(LV_PALETTE_GREEN));
lv_style_set_border_color(&style_btn, lv_palette_darken(LV_PALETTE_GREEN, 3));
lv_style_set_border_width(&style_btn, 3);
/*Initialize the new theme from the current theme*/
lv_theme_t * th_act = lv_disp_get_theme(NULL);
static lv_theme_t th_new;
th_new = *th_act;
/*Set the parent theme and the style apply callback for the new theme*/
lv_theme_set_parent(&th_new, th_act);
lv_theme_set_apply_cb(&th_new, new_theme_apply_cb);
/*Assign the new theme to the current display*/
lv_disp_set_theme(NULL, &th_new);
}
/**
* Extending the current theme
*/
void lv_example_style_14(void)
{
lv_obj_t * btn;
lv_obj_t * label;
btn = lv_btn_create(lv_scr_act());
lv_obj_align(btn, LV_ALIGN_TOP_MID, 0, 20);
label = lv_label_create(btn);
lv_label_set_text(label, "Original theme");
lv_obj_set_style_text_font(label, &lv_font_montserrat_48, 0);
lv_obj_set_style_size(btn, LV_SIZE_CONTENT, 0);
new_theme_init_and_set();
btn = lv_btn_create(lv_scr_act());
lv_obj_align(btn, LV_ALIGN_BOTTOM_MID, 0, -20);
label = lv_label_create(btn);
lv_label_set_text(label, "New theme");
lv_obj_set_style_text_font(label, &lv_font_montserrat_48, 0);
lv_obj_set_style_size(btn, LV_SIZE_CONTENT, 0);
}
演示如下
![]()
点：
切换主题。
1 ，可以直接显示学习参数，并显示NULL参数，内部调用lv_disp_get_theme()函数获得默认的参数。lv_disp_set_theme()lv_disp_get_default()
再看一下这个lv_example_style_15例子已经删除了，官网的发现程序已经复制过来了。于是，已经在程序中并没有出现新的测试。是，和。而且，尝试任何按钮和标签，设置翻译后都没有效果。而在按钮里加入一个图像，给图像设置翻译是可以的。lv_obj_set_style_transform_pivot_x()lv_obj_set_style_transform_pivot_y()lv_obj_set_style_translate_x()lv_obj_set_style_translate_y()
void lv_example_style_15(void)
{
lv_obj_t * btn;
lv_obj_t * label;
/*Normal button*/
btn = lv_btn_create(lv_scr_act());
lv_obj_set_size(btn, LV_SIZE_CONTENT, LV_SIZE_CONTENT);
lv_obj_align(btn, LV_ALIGN_CENTER, 0, -150);
label = lv_label_create(btn);
lv_label_set_text(label, "Normal");
lv_obj_center(label);
lv_obj_set_style_text_font(label, &lv_font_montserrat_48, 0);
/*Set opacity
*The button and the label is rendered to a layer first and that layer is blended*/
btn = lv_btn_create(lv_scr_act());
lv_obj_set_size(btn, LV_SIZE_CONTENT, LV_SIZE_CONTENT);
lv_obj_set_style_opa(btn, LV_OPA_50, 0);
lv_obj_align(btn, LV_ALIGN_CENTER, 0, 0);
label = lv_label_create(btn);
lv_label_set_text(label, "Opa:50%");
lv_obj_center(label);
lv_obj_set_style_text_font(label, &lv_font_montserrat_48, 0);
/*Set transformations
*The button and the label is rendered to a layer first and that layer is transformed*/
btn = lv_btn_create(lv_scr_act());
lv_obj_set_size(btn, LV_SIZE_CONTENT, LV_SIZE_CONTENT);
lv_obj_set_style_transform_angle(btn, 150, 0); /*15 deg*/
lv_coord_t zoom = lv_obj_get_style_transform_zoom(btn, 0);
rt_kprintf("button zoom:%d
", zoom);
lv_obj_set_style_transform_zoom(btn, zoom * 1.25, 0); /*1.25x*/
lv_obj_set_style_translate_x(btn, lv_obj_get_style_x(btn, 0)/2, 0);
lv_obj_set_style_translate_y(btn, lv_obj_get_style_y(btn, 0)/2, 0);
lv_obj_set_style_opa(btn, LV_OPA_COVER, 0);
lv_obj_align(btn, LV_ALIGN_CENTER, 0, 150);
label = lv_label_create(btn);
lv_label_set_text(label, "Transf.");
lv_obj_center(label);
lv_obj_set_style_text_font(label, &lv_font_montserrat_48, 0);
lv_obj_t *img = lv_img_create(btn);
lv_obj_center(img);
LV_IMG_DECLARE(animimg002);
lv_img_set_src(img, &animimg002);
lv_obj_set_style_img_recolor(img, lv_palette_user(LV_PALETTE_BLUE), 0);
lv_obj_set_style_transform_angle(img, 150, 0);
zoom = lv_obj_get_style_transform_zoom(img, 0);
rt_kprintf("button zoom:%d
", zoom);
lv_obj_set_style_transform_zoom(img, zoom / 2, 0);
lv_obj_set_style_translate_x(img, lv_obj_get_style_x(img, 0)/2, 0);
lv_obj_set_style_translate_y(img, lv_obj_get_style_y(img, 0)/2, 0);
}
效果方面： 1，给控件添加
![]()
学习
变换相关属性。
2，普通控件支持转换了，图像控件可以。
至此，官方例程以及全部学习完成。为了演示效果和不影响演示，的例程都调整好了。后面希望军进下一个程程。能在比赛结束前多看一些程程。留程时间完成。
原作者：吉利咕噜2022
|
0
/6 
工商网监
湘ICP备2023018690号
2952
淘帖
9
