LVGL STYLE

已于 2022-06-11 17:21:33 修改
阅读量1.1k 收藏 6
点赞数 1
分类专栏： LVGL 文章标签： 单片机 原型模式 stm32
于 2022-06-11 13:18:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43289353/article/details/125233626
版权

BORDER-BOX模型

border-box模型
API

void lv_obj_set_style_width(lv_obj_t * obj,
                            lv_coord_t value,
                            lv_style_selector_t selector);

void lv_obj_set_style_min_width(lv_obj_t * obj,
                                lv_coord_t value,
                                lv_style_selector_t selector);

void lv_obj_set_style_max_width(lv_obj_t * obj,
                                lv_coord_t value,
                                lv_style_selector_t selector);

void lv_obj_set_style_height(lv_obj_t * obj,
                             lv_coord_t value,
                             lv_style_selector_t selector);

void lv_obj_set_style_min_height(lv_obj_t * obj,
                                 lv_coord_t value,
                                 lv_style_selector_t selector);

void lv_obj_set_style_max_height(lv_obj_t * obj,
                                 lv_coord_t value,
                                 lv_style_selector_t selector);

void lv_obj_set_style_x(lv_obj_t * obj,
                        lv_coord_t value,
                        lv_style_selector_t selector);

void lv_obj_set_style_y(lv_obj_t * obj,
                        lv_coord_t value,
                        lv_style_selector_t selector);

void lv_obj_set_style_align(lv_obj_t * obj,
                            lv_align_t value,
                            lv_style_selector_t selector);

void lv_obj_set_style_transform_width(lv_obj_t * obj,
                                      lv_coord_t value,
                                      lv_style_selector_t selector);

void lv_obj_set_style_transform_height(lv_obj_t * obj,
                                       lv_coord_t value,
                                       lv_style_selector_t selector);

void lv_obj_set_style_translate_x(lv_obj_t * obj,
                                  lv_coord_t value,
                                  lv_style_selector_t selector);

void lv_obj_set_style_translate_y(lv_obj_t * obj,
                                  lv_coord_t value,
                                  lv_style_selector_t selector);

void lv_obj_set_style_transform_zoom(lv_obj_t * obj,
                                     lv_coord_t value,
                                     lv_style_selector_t selector);

void lv_obj_set_style_transform_angle(lv_obj_t * obj,
                                      lv_coord_t value,
                                      lv_style_selector_t selector);

void lv_obj_set_style_pad_top(lv_obj_t * obj,
                              lv_coord_t value,
                              lv_style_selector_t selector);

void lv_obj_set_style_pad_bottom(lv_obj_t * obj,
                                 lv_coord_t value,
                                 lv_style_selector_t selector);

void lv_obj_set_style_pad_left(lv_obj_t * obj,
                               lv_coord_t value,
                               lv_style_selector_t selector);

void lv_obj_set_style_pad_right(lv_obj_t * obj,
                                lv_coord_t value,
                                lv_style_selector_t selector);

void lv_obj_set_style_pad_row(lv_obj_t * obj,
                              lv_coord_t value,
                              lv_style_selector_t selector);

void lv_obj_set_style_pad_column(lv_obj_t * obj,
                                 lv_coord_t value,
                                 lv_style_selector_t selector);

void lv_obj_set_style_radius(lv_obj_t * obj,
                             lv_coord_t value,
                             lv_style_selector_t selector);

void lv_obj_set_style_clip_corner(lv_obj_t * obj,
                                  bool value,
                                  lv_style_selector_t selector);

void lv_obj_set_style_opa(lv_obj_t * obj,
                          lv_opa_t value,
                          lv_style_selector_t selector);

void lv_obj_set_style_color_filter_dsc(lv_obj_t * obj,
                                       const lv_color_filter_dsc_t * value,
                                       lv_style_selector_t selector);

void lv_obj_set_style_color_filter_opa(lv_obj_t * obj,
                                       lv_opa_t value,
                                       lv_style_selector_t selector);

void lv_obj_set_style_anim_time(lv_obj_t * obj,
                                uint32_t value,
                                lv_style_selector_t selector);

void lv_obj_set_style_anim_speed(lv_obj_t * obj,
                                 uint32_t value,
                                 lv_style_selector_t selector);

void lv_obj_set_style_transition(lv_obj_t * obj,
                                 const lv_style_transition_dsc_t * value,
                                 lv_style_selector_t selector);

void lv_obj_set_style_blend_mode(lv_obj_t * obj,
                                 lv_blend_mode_t value,
                                 lv_style_selector_t selector);

void lv_obj_set_style_layout(lv_obj_t * obj,
                             uint16_t value,
                             lv_style_selector_t selector);

void lv_obj_set_style_base_dir(lv_obj_t * obj,
                               lv_base_dir_t value,
                               lv_style_selector_t selector);

void lv_obj_set_style_bg_color(lv_obj_t * obj,
                               lv_color_t value,
                               lv_style_selector_t selector);

void lv_obj_set_style_bg_color_filtered(lv_obj_t * obj,
                                        lv_color_t value,
                                        lv_style_selector_t selector);

void lv_obj_set_style_bg_opa(lv_obj_t * obj,
                             lv_opa_t value,
                             lv_style_selector_t selector);

void lv_obj_set_style_bg_grad_color(lv_obj_t * obj,
                                    lv_color_t value,
                                    lv_style_selector_t selector);

void lv_obj_set_style_bg_grad_color_filtered(lv_obj_t * obj,
        									 lv_color_t value,
        									 lv_style_selector_t selector);

void lv_obj_set_style_bg_grad_dir(lv_obj_t * obj,
                                  lv_grad_dir_t value,
                                  lv_style_selector_t selector);

void lv_obj_set_style_bg_main_stop(lv_obj_t * obj,
                                   lv_coord_t value,
                                   lv_style_selector_t selector);

void lv_obj_set_style_bg_grad_stop(lv_obj_t * obj,
                                   lv_coord_t value,
                                   lv_style_selector_t selector);

void lv_obj_set_style_bg_img_src(lv_obj_t * obj,
                                 const void * value,
                                 lv_style_selector_t selector);

void lv_obj_set_style_bg_img_opa(lv_obj_t * obj,
                                 lv_opa_t value,
                                 lv_style_selector_t selector);

void lv_obj_set_style_bg_img_recolor(lv_obj_t * obj,
                                     lv_color_t value,
                                     lv_style_selector_t selector);

void lv_obj_set_style_bg_img_recolor_filtered(lv_obj_t * obj,
        									  lv_color_t value,
        									  lv_style_selector_t selector);

void lv_obj_set_style_bg_img_recolor_opa(lv_obj_t * obj,
        								 lv_opa_t value,
        								 lv_style_selector_t selector);

void lv_obj_set_style_bg_img_tiled(lv_obj_t * obj,
                                   bool value,
                                   lv_style_selector_t selector);

void lv_obj_set_style_border_color(lv_obj_t * obj,
                                   lv_color_t value,
                                   lv_style_selector_t selector);

void lv_obj_set_style_border_color_filtered(lv_obj_t * obj,
        									lv_color_t value,
        									lv_style_selector_t selector);

void lv_obj_set_style_border_opa(lv_obj_t * obj,
                                 lv_opa_t value,
                                 lv_style_selector_t selector);

void lv_obj_set_style_border_width(lv_obj_t * obj,
                                   lv_coord_t value,
                                   lv_style_selector_t selector);

void lv_obj_set_style_border_side(lv_obj_t * obj,
                                  lv_border_side_t value,
                                  lv_style_selector_t selector);

void lv_obj_set_style_border_post(lv_obj_t * obj,
                                  bool value,
                                  lv_style_selector_t selector);

void lv_obj_set_style_text_color(lv_obj_t * obj,
                                 lv_color_t value,
                                 lv_style_selector_t selector);

void lv_obj_set_style_text_color_filtered(lv_obj_t * obj,
        								  lv_color_t value,
        								  lv_style_selector_t selector);

void lv_obj_set_style_text_opa(lv_obj_t * obj,
                               lv_opa_t value,
                               lv_style_selector_t selector);

void lv_obj_set_style_text_font(lv_obj_t * obj,
                                const lv_font_t * value,
                                lv_style_selector_t selector);

void lv_obj_set_style_text_letter_space(lv_obj_t * obj,
                                        lv_coord_t value,
                                        lv_style_selector_t selector);

void lv_obj_set_style_text_line_space(lv_obj_t * obj,
                                      lv_coord_t value,
                                      lv_style_selector_t selector);

void lv_obj_set_style_text_decor(lv_obj_t * obj,
                                 lv_text_decor_t value,
                                 lv_style_selector_t selector);

void lv_obj_set_style_text_align(lv_obj_t * obj,
                                 lv_text_align_t value,
                                 lv_style_selector_t selector);

void lv_obj_set_style_img_opa(lv_obj_t * obj,
                              lv_opa_t value,
                              lv_style_selector_t selector);

void lv_obj_set_style_img_recolor(lv_obj_t * obj,
                                  lv_color_t value,
                                  lv_style_selector_t selector);

void lv_obj_set_style_img_recolor_filtered(lv_obj_t * obj,
        								   lv_color_t value,
        								   lv_style_selector_t selector);

void lv_obj_set_style_img_recolor_opa(lv_obj_t * obj,
                                      lv_opa_t value,
                                      lv_style_selector_t selector);

void lv_obj_set_style_outline_width(lv_obj_t * obj,
                                    lv_coord_t value,
                                    lv_style_selector_t selector);

void lv_obj_set_style_outline_color(lv_obj_t * obj,
                                    lv_color_t value,
                                    lv_style_selector_t selector);

void lv_obj_set_style_outline_color_filtered(lv_obj_t * obj,
        									 lv_color_t value,
        									 lv_style_selector_t selector);

void lv_obj_set_style_outline_opa(lv_obj_t * obj,
                                  lv_opa_t value,
                                  lv_style_selector_t selector);

void lv_obj_set_style_outline_pad(lv_obj_t * obj,
                                  lv_coord_t value,
                                  lv_style_selector_t selector);

void lv_obj_set_style_shadow_width(lv_obj_t * obj,
                                   lv_coord_t value,
                                   lv_style_selector_t selector);

void lv_obj_set_style_shadow_ofs_x(lv_obj_t * obj,
                                   lv_coord_t value,
                                   lv_style_selector_t selector);

void lv_obj_set_style_shadow_ofs_y(lv_obj_t * obj,
                                   lv_coord_t value,
                                   lv_style_selector_t selector);

void lv_obj_set_style_shadow_spread(lv_obj_t * obj,
                                    lv_coord_t value,
                                    lv_style_selector_t selector);

void lv_obj_set_style_shadow_color(lv_obj_t * obj,
                                   lv_color_t value,
                                   lv_style_selector_t selector);

void lv_obj_set_style_shadow_color_filtered(lv_obj_t * obj,
        									lv_color_t value,
        									lv_style_selector_t selector);

void lv_obj_set_style_shadow_opa(lv_obj_t * obj,
                                 lv_opa_t value,
                                 lv_style_selector_t selector);

void lv_obj_set_style_line_width(lv_obj_t * obj,
                                 lv_coord_t value,
                                 lv_style_selector_t selector);

void lv_obj_set_style_line_dash_width(lv_obj_t * obj,
                                      lv_coord_t value,
                                      lv_style_selector_t selector);

void lv_obj_set_style_line_dash_gap(lv_obj_t * obj,
                                    lv_coord_t value,
                                    lv_style_selector_t selector);

void lv_obj_set_style_line_rounded(lv_obj_t * obj,
                                   bool value,
                                   lv_style_selector_t selector);

void lv_obj_set_style_line_color(lv_obj_t * obj,
                                 lv_color_t value,
                                 lv_style_selector_t selector);

void lv_obj_set_style_line_color_filtered(lv_obj_t * obj,
        								  lv_color_t value,
        								  lv_style_selector_t selector);

void lv_obj_set_style_line_opa(lv_obj_t * obj,
                               lv_opa_t value,
                               lv_style_selector_t selector);

void lv_obj_set_style_arc_width(lv_obj_t * obj,
                                lv_coord_t value,
                                lv_style_selector_t selector);

void lv_obj_set_style_arc_rounded(lv_obj_t * obj,
                                  bool value,
                                  lv_style_selector_t selector);

void lv_obj_set_style_arc_color(lv_obj_t * obj,
                                lv_color_t value,
                                lv_style_selector_t selector);

void lv_obj_set_style_arc_color_filtered(lv_obj_t * obj,
        								 lv_color_t value,
        								 lv_style_selector_t selector);

void lv_obj_set_style_arc_opa(lv_obj_t * obj,
                              lv_opa_t value,
                              lv_style_selector_t selector);

void lv_obj_set_style_arc_img_src(lv_obj_t * obj,
                                  const void * value,
                                  lv_style_selector_t selector);

/**
 * 部件可能的部分
 * 部件可以被视为小部件的内部构建块.
 * 例如:滑块=背景+指示器+旋钮
 * 注意，每个部件都使用每个部分
 */
enum {
    LV_PART_MAIN         = 0x000000,   /**< 背景矩形 */
    LV_PART_SCROLLBAR    = 0x010000,   /**< 滚动条 */
    LV_PART_INDICATOR    = 0x020000,   /**< 指示器，例如用于滑块、条、开关或复选框中的勾选框 */
    LV_PART_KNOB         = 0x030000,   /**< 类似抓手柄来调整值 */
    LV_PART_SELECTED     = 0x040000,   /**< 表示当前选择的选项或部分 */
    LV_PART_ITEMS        = 0x050000,   /**< 如果小部件有多个相似的元素(例如，表格单元格) */
    LV_PART_TICKS        = 0x060000,   /**< 刻度上的刻度，例如图表或仪表 */
    LV_PART_CURSOR       = 0x070000,   /**< 标记一个特定的位置，如文本区域的光标或图表上 */

    LV_PART_CUSTOM_FIRST = 0x080000,    /**< 可以从这里添加自定义部件 */

    LV_PART_ANY          = 0x0F0000,    /**< 在某些函数中可以使用特殊值来针对所有部分 */
};
typedef uint32_t lv_part_t;
摸鱼的码农族
关注
专栏目录
【定制功能】LVGL 图片缩放
Bigan(安)的博客
10-20 4465
实际项目中，有很多图片与实际展示的大小不一致的，所以需要有一个功能，能自行对图片进行缩放。
lvgl v8 按钮动画和长按时间修改
wang123qweasd的博客
06-17 3543
lvgl v8 按钮
LVGL 学习笔记（一）
qq_73577605的博客
04-22 1225
从今天开始我将开始记录我的LVGL的学习过程。包括LVGL在OS上的应用，这里我使用的是freertos操作系统。我将从windows系统上仿真学习开始，逐步展开，最后迁移到freertos中。这即是我自己的笔记也是对于其他人刚刚入门的学习笔记的共享。这里我跟的课程是正点原子的新版课程，使用的编译工具是codeblocks 20.03 mingw和keil5.这里不包括工程的建立以及移植，只有使用编程的方法以及思想。希望与大家共勉。
lvgl 8.x版本实现圆角的单独设置
最新发布
m0_61704502的博客
07-10 449
lvgl 设置控件的单独圆角效果
LVGL 8.2 menu from a drop-down list
mygod2008ok的专栏
06-26 639
LVGL 8.2 Menu from a drop -down list
平移（translation）及变形（transform）的应用
Doyoung的专栏
04-24 698
效果一：按压按钮，向上平移（translation） 代码实现 static lv_style_t def; lv_style_init(&def); lv_style_set_x(&def,100); lv_style_set_y(&def,100); lv_style_set_size(&def,50); static lv_style_t pres; lv_style_init(&pres)
给你的GUI润润色吧！别再那么Low了！LVGL『风格Style』介绍
热门推荐
朝气蓬勃
02-20 1万+
一. LVGL风格Style介绍 样式用于设置对象的外观。lvgl 中的样式受 CSS 启发很大。简而言之，概念如下： 样式是一个 lv_style_t 可以保存属性的变量，例如边框宽度，文本颜色等。与 class CSS 类似。 并非必须指定所有属性。未指定的属性将使用默认值。 可以将样式分配给对象以更改其外观。 样式可以被任意数量的对象使用。 样式可以级联，这意味着可以将多个样式分配给一个对象，并且每种样式可以具有不同的属性。例如，style_btn 可能会导致默认的灰色按钮，并且 styl
三.LVGL学习——（Buttons styles）
m0_46278925的博客
11-16 1347
三.LVGL学习——（Buttons styles） 按钮对象样式 //定义三个lv_style_t变量 static lv_style_t style_btn; //按钮1按下前的样式变量 static lv_style_t style_btn_pressed; //按钮按下时的样式变量 static lv_style_t style_btn_red; // //定义颜色过滤器回调函数 static lv_color_t darken(const lv_col
LVGL学习笔记
dididaifly的博客
01-19 1086
拖拽属性 设置回调函数，获取设备的偏移量，重新进行坐标的设置来获得拖拽的效果 static void drag_event_handler(lv_event_t* e) { lv_obj_t* obj = lv_event_get_target(e); lv_indev_t* indev = lv_indev_get_act(); if (indev == NULL) return; lv_point_t vect; lv_indev_get_vect(ind
LVGL NXP GUIguider 支持LVGL8 &LVGL7 离线安装包
07-29
LVGL NXP GUIguider 支持LVGL8 &LVGL7 离线安装包 LVGL NXP GUIguider 支持LVGL8 &LVGL7 离线安装包 LVGL NXP GUIguider 支持LVGL8 &LVGL7 离线安装包 LVGL NXP GUIguider 支持LVGL8 &LVGL7 离线安装包 LVGL NXP ...
LVGL中文手册.pdf
03-26
2. 自定义样式：可以使用`lv_obj_set_style_`系列函数设置对象的样式。 3. 最小值和最大值：通过`lv_slider_set_range()`设置滑块的范围。 ### 工作机制 #### 父-子结构 父对象可以视为子对象的容器。每个对象都...
CODING_STYLE.md
05-23
基于LVGL编写应用的代码规范
lvgl中文文档.rar
08-27
同时，通过样式表（Style Sheet），可以方便地控制对象的外观，如颜色、字体、边框等。 4. **动画与交互**：LVGL支持动画效果，使得用户界面更加动态和吸引人。文档将解释如何创建和管理动画，以及如何响应用户的...
LVGL的arduno库文件可用
10-07
4. **样式（Style）**：LVGL支持自定义样式，你可以设置字体、颜色、边框等属性，使UI元素看起来更具吸引力。 5. **动画（Animations）**：LVGL库也提供了丰富的动画效果，如淡入淡出、平移、旋转等，可以增加应用...
LVGL8学习之Button Styles
菜鸟攻城狮
08-25 4099
上一篇学习了Button，这一篇学习为按钮添加样式 static void button_style_init() { lv_style_init(&style_btn); // 初始化按钮样式 lv_style_reset(&style_btn); // 重置按钮样式 lv_style_set_radius(&style_btn, 10); // 设置按钮样式圆角弧度 lv_style_set_bg_opa(&style_btn, LV
LVGL学习笔记10 - 按钮Button
pq的博客
01-01 9562
按钮有点类似矩形框，更多的是具有事件属性。通过lv_btn_create创建。按钮的Parts只有LV_PART_MAIN。
【LVGL(重要)】样式属性API函数及其参数
知寒
06-26 1971
LVGL所有样式列表以及每个样式所使用到的参数
LVGL官方文档-7.11.0-12-Overview-Styles
我是Timothy
07-23 2450
Style用于给Object设置外观。LVGL中的Style由CSS启发，其设计理念大致如下： Style是一个lv_style_t类型的变量，其中保存属性，如边框宽度，文字颜色等。类似于CSS中的class。 使用的时候不需要指定全部属性，未指定的属性为默认值。 Style可以赋值给Object来改变其外观。 同一个Style可以由多个Object共用。 Style可以是级联的。这意味着可以将多个Style赋值给同一个Object。例如style_btn用于显示一个灰色的按钮，style_btn_red
【LVGL】组件的样式的设置、更改、删除API函数
知寒
06-26 7774
组件的样式的设置、更改、删除API函数
LVGL style
11-16
LVGL是一个开源的GUI库，提供了丰富的控件和样式，可以用于嵌入式系统的图形化界面设计。其中，style是LVGL中非常重要的一个概念，用于定义控件的外观和行为。下面是关于LVGL style的介绍和示例： 1. style的定义和使用 style是一个结构体，包含了控件的各种属性，例如背景颜色、边框、字体等。可以通过lv_style_init()函数初始化一个style，然后通过lv_obj_add_style()函数将style应用到控件上。例如： ```c static lv_style_t style1; lv_style_init(&style1); lv_style_set_bg_color(&style1, LV_STATE_DEFAULT, LV_COLOR_WHITE); lv_style_set_border_color(&style1, LV_STATE_DEFAULT, LV_COLOR_BLACK); lv_obj_add_style(btn1, LV_BTN_PART_MAIN, &style1); ``` 上面的代码定义了一个名为style1的style，将其背景颜色设置为白色，边框颜色设置为黑色，并将其应用到了名为btn1的按钮控件上。 2. state的概念 style中的state用于定义控件的状态，例如默认状态、按下状态、选中状态等。可以通过LV_STATE_XXX宏定义来指定state。例如： ```c lv_style_set_bg_color(&style1, LV_STATE_DEFAULT, LV_COLOR_WHITE); lv_style_set_bg_color(&style1, LV_STATE_PRESSED, LV_COLOR_GRAY); lv_style_set_bg_color(&style1, LV_STATE_FOCUSED, LV_COLOR_RED); ``` 上面的代码分别定义了style1在默认状态、按下状态和选中状态下的背景颜色。 3. style的继承 style可以通过继承来实现样式的复用。可以通过lv_style_set_parent()函数将一个style设置为另一个style的父样式。例如： ```c static lv_style_t style1, style2; lv_style_init(&style1); lv_style_set_bg_color(&style1, LV_STATE_DEFAULT, LV_COLOR_WHITE); lv_style_set_border_color(&style1, LV_STATE_DEFAULT, LV_COLOR_BLACK); lv_style_init(&style2); lv_style_set_parent(&style2, &style1); lv_style_set_bg_color(&style2, LV_STATE_PRESSED, LV_COLOR_GRAY); lv_obj_add_style(btn1, LV_BTN_PART_MAIN, &style1); lv_obj_add_style(btn2, LV_BTN_PART_MAIN, &style2); ``` 上面的代码定义了两个style，其中style2继承了style1，并将其在按下状态下的背景颜色设置为灰色。然后将style1应用到了btn1上，将style2应用到了btn2上。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值