LVGL Styles

news2025/2/24 6:47:29

LVGL Styles

  • Get started
    • 按钮添加标签
    • 按钮添加风格
    • 滑动条值显示
  • Styles
    • Size styles
    • Background styles
    • Border styles
    • Outline styles
    • Shadow styles
    • Image styles
    • Arc styles
    • Text styles
    • Line styles

Get started

按钮添加标签

/**
 * @brief 按钮事件回调函数
 * @param e 
*/
void btn_event_cb(lv_event_t* e)
{
    lv_event_code_t code = lv_event_get_code(e);
    lv_obj_t* btn = lv_event_get_current_target(e);

    if (LV_EVENT_CLICKED == code) {
        static uint8_t cnt = 0;
        cnt++;

        lv_obj_t* label = lv_obj_get_child(btn, 0);
        lv_label_set_text_fmt(label, "Button:%d", cnt);
    }
}

/**
 * @brief Get started demo
 * @param  
*/
void lv_demo_get_started(void)
{
    lv_obj_t * btn = lv_btn_create(lv_scr_act());
    lv_obj_set_size(btn, 100, 50);
    lv_obj_set_pos(btn, 150, 100);
    lv_obj_add_event_cb(btn, btn_event_cb, LV_EVENT_ALL, NULL);

   
    lv_obj_t* label = lv_label_create(btn);
    lv_label_set_text(label, "Button:");
    lv_obj_center(label);
}

在这里插入图片描述

按钮添加风格

static lv_style_t style_btn;
static lv_style_t style_btn_pressed;
static lv_style_t style_btn_red;

static lv_color_t darken(const lv_color_filter_dsc_t* dsc, lv_color_t color, lv_opa_t opa)
{
    LV_UNUSED(dsc);
    return lv_color_darken(color, opa);
}

static void style_init(void)
{
    // 创建一个简单按钮风格
    lv_style_init(&style_btn);
    lv_style_set_radius(&style_btn, 10);
    lv_style_set_bg_opa(&style_btn, LV_OPA_COVER);
    lv_style_set_bg_color(&style_btn, lv_palette_lighten(LV_PALETTE_GREY, 3));
    lv_style_set_bg_grad_color(&style_btn, lv_palette_main(LV_PALETTE_GREY));
    lv_style_set_bg_grad_dir(&style_btn, LV_GRAD_DIR_VER);

    lv_style_set_border_color(&style_btn, lv_color_black());
    lv_style_set_border_opa(&style_btn, LV_OPA_20);
    lv_style_set_border_width(&style_btn, 2);

    lv_style_set_text_color(&style_btn, lv_color_black());


    // 创建按下状态风格
    static lv_color_filter_dsc_t color_filter;
    lv_color_filter_dsc_init(&color_filter, darken);
    lv_style_init(&style_btn_pressed);
    lv_style_set_color_filter_dsc(&style_btn_pressed, &color_filter);
    lv_style_set_color_filter_opa(&style_btn_pressed, LV_OPA_20);

    // 创建红色风格，仅改变一些颜色
    lv_style_init(&style_btn_red);
    lv_style_set_bg_color(&style_btn_red, lv_palette_main(LV_PALETTE_RED));
    lv_style_set_bg_grad_color(&style_btn_red, lv_palette_lighten(LV_PALETTE_RED, 3));
}

void lv_demo_get_started2(void)
{
    /* Initialize the style */
    style_init();

    lv_obj_t* btn = lv_btn_create(lv_scr_act());

    lv_obj_remove_style_all(btn);
    lv_obj_set_size(btn, 120, 50);
    lv_obj_set_pos(btn, 10, 10);
    lv_obj_add_style(btn, &style_btn, 0); // LV_STATE_DEFAULT
    lv_obj_add_style(btn, &style_btn_pressed, LV_STATE_PRESSED);

    /* Add a label to the button */
    lv_obj_t* label = lv_label_create(btn);
    lv_label_set_text(label, "Button");
    lv_obj_center(label);

    /* Create another button and use the red style too */
    lv_obj_t* btn2 = lv_btn_create(lv_scr_act());
    lv_obj_remove_style_all(btn2);  /* Remove the styles coming from the theme */
    lv_obj_set_size(btn2, 120, 50);
    lv_obj_set_pos(btn2, 10, 80);
    lv_obj_add_style(btn2, &style_btn, 0);
    lv_obj_add_style(btn2, &style_btn_red, 0);
    lv_obj_add_style(btn2, &style_btn_pressed, LV_STATE_PRESSED);
    lv_obj_set_style_radius(btn2, LV_RADIUS_CIRCLE, 0);

    label = lv_label_create(btn2);
    lv_label_set_text(label, "Button 2");
    lv_obj_center(label);

}

在这里插入图片描述

滑动条值显示


static lv_obj_t* label;
static void slider_event_cb(lv_event_t* e)
{
    lv_obj_t* slider = lv_event_get_target(e);

    /* Refresh the text */
    lv_label_set_text_fmt(label, "%d", lv_slider_get_value(slider));
    lv_obj_align_to(label, slider, LV_ALIGN_OUT_TOP_MID, 0, -15);
}

void lv_demo_get_started3(void)
{
    /* Create a slider in the center of the display */
    lv_obj_t* slider = lv_slider_create(lv_scr_act());
    lv_obj_set_width(slider, 200);  /*  Set the width */
    lv_obj_center(slider);  /* Align to the center of the parent (screen) */

    lv_obj_add_event_cb(slider, slider_event_cb, LV_EVENT_VALUE_CHANGED, NULL);

    label = lv_label_create(lv_scr_act());
    lv_label_set_text(label, "0");
    lv_obj_align_to(label, slider, LV_ALIGN_OUT_TOP_MID, 0, -15); /* Align top of the slider */
}

在这里插入图片描述

Styles

Size styles

void lv_demo_style_1(void)
{
    static lv_style_t style;
    lv_style_init(&style);
    lv_style_set_radius(&style, 5);

    /* Make a gradient */
    lv_style_set_width(&style, 150);
    lv_style_set_height(&style, LV_SIZE_CONTENT);

    lv_style_set_pad_ver(&style, 20);
    lv_style_set_pad_left(&style, 5);

    lv_style_set_x(&style, lv_pct(50));
    lv_style_set_y(&style, 80);

    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(label, "Hello");
}

在这里插入图片描述

Background styles

渐变方向：

  • LV_GRAD_DIR_VER：垂直方向
  • LV_GRAD_DIR_HOR：水平方向
void lv_demo_style_2(void)
{
    static lv_style_t style;
    lv_style_init(&style);
    lv_style_set_radius(&style, 5);

    lv_style_set_bg_opa(&style, LV_OPA_COVER);

    static lv_grad_dsc_t grad;
    grad.dir = LV_GRAD_DIR_VER; // 渐变方向
    grad.stops_count = LV_GRADIENT_MAX_STOPS;
    grad.stops[0].color = lv_palette_lighten(LV_PALETTE_GREY, 1); // 颜色1
    grad.stops[1].color = lv_palette_main(LV_PALETTE_BLUE); // 颜色2
    grad.stops[0].frac = 128; // 1~255 
    grad.stops[1].frac = 192; // 1~255 

    lv_style_set_bg_grad(&style, &grad);

    lv_obj_t* obj = lv_obj_create(lv_scr_act());
    lv_obj_add_style(obj, &style, 0);
    lv_obj_center(obj);

    lv_obj_t* label = lv_label_create(obj);
    lv_label_set_text(label, "Hello");
    lv_obj_center(label);
}

在这里插入图片描述

Border styles

void lv_demo_style_3(void) // Border styles
{
    static lv_style_t style;
    lv_style_init(&style);

    /* Set a background color and a radius */
    lv_style_set_radius(&style, 5);
    lv_style_set_bg_opa(&style, LV_OPA_COVER);
    lv_style_set_bg_color(&style, lv_palette_lighten(LV_PALETTE_GREY, 1));

    /* Add border to the bottom+right */
    lv_style_set_border_color(&style, lv_palette_main(LV_PALETTE_BLUE));
    lv_style_set_border_width(&style, 5);
    lv_style_set_border_opa(&style, LV_OPA_50);
    lv_style_set_border_side(&style, LV_BORDER_SIDE_BOTTOM | LV_BORDER_SIDE_RIGHT);

    /* 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);

}

在这里插入图片描述

Outline styles

void lv_demo_style_4(void) // Outline styles
{
    static lv_style_t style;
    lv_style_init(&style);

    /* Set a background color and radius */
    lv_style_set_radius(&style, 5);
    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, 2);
    lv_style_set_outline_color(&style, lv_palette_main(LV_PALETTE_BLUE));
    lv_style_set_outline_pad(&style, 8);

    /* 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);
}

在这里插入图片描述

Shadow styles

void lv_demo_style_5(void) // Shadow styles
{
    static lv_style_t style;
    lv_style_init(&style);

    /* Set a background color and a radius */
    lv_style_set_radius(&style, 5);
    lv_style_set_bg_opa(&style, LV_OPA_COVER);
    lv_style_set_bg_color(&style, lv_palette_lighten(LV_PALETTE_GREY, 1));

    /* Add a shadow */
    lv_style_set_shadow_width(&style, 55);
    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);

    /* 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);
}

在这里插入图片描述
设置shadow offset的效果：
lv_style_set_shadow_ofs_x(&style, 10);
lv_style_set_shadow_ofs_y(&style, 20);
在这里插入图片描述

Image styles

const uint8_t img_cogwheel_argb_map[] = {
/Pixel format: Alpha 8 bit, Red: 3 bit, Green: 3 bit, Blue: 2 bit/
0xff, 0x00, 0xff, 0x00, 0xff, 0x00, 0xff, 0x00, 0xff, 0x00, 0xff, 0x00, 0xff,
…
}
const lv_img_dsc_t img_cogwheel_argb = {
.header.always_zero = 0,
.header.w = 100,
.header.h = 100,
.data_size = 10000 * LV_IMG_PX_SIZE_ALPHA_BYTE,
.header.cf = LV_IMG_CF_TRUE_COLOR_ALPHA,
.data = img_cogwheel_argb_map,
};

void lv_demo_style_6(void) // Image styles
{
    lv_style_t style;
    lv_style_init(&style);

    /* Set a background color and a radius */
    lv_style_set_radius(&style, 5);
    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_border_width(&style, 2);
    lv_style_set_border_color(&style, lv_palette_main(LV_PALETTE_BLUE));

    lv_style_set_img_recolor(&style, lv_palette_main(LV_PALETTE_BLUE));
    lv_style_set_img_recolor_opa(&style, LV_OPA_50);
    lv_style_set_transform_angle(&style, 300);

    /* 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_IMG_DECLARE(img_cogwheel_argb);
    lv_img_set_src(obj, &img_cogwheel_argb);

    lv_obj_center(obj);
}

在这里插入图片描述

Arc styles

void lv_demo_style_7(void) // Arc styles
{
    static lv_style_t style;
    lv_style_init(&style);

    lv_style_set_arc_width(&style, 4);
    lv_style_set_arc_opa(&style, LV_OPA_COVER);
    lv_style_set_arc_color(&style, lv_palette_main(LV_PALETTE_RED));

    /* 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);
}

在这里插入图片描述

Text styles

void lv_demo_style_8(void) // Text styles
{
    static lv_style_t style;
    lv_style_init(&style);

    lv_style_set_radius(&style, 5);
    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, 2);
    lv_style_set_border_color(&style, lv_palette_main(LV_PALETTE_BLUE));
    lv_style_set_pad_all(&style, 10);


    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);

    /* 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 \n"
            "a label");
    lv_obj_center(obj);

}

在这里插入图片描述

Line styles

void lv_demo_style_9(void) // Line styles
{
    static lv_style_t style;
    lv_style_init(&style);

    lv_style_set_line_color(&style, lv_palette_main(LV_PALETTE_GREY));
    lv_style_set_line_width(&style, 6);
    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[] = { {10, 30}, {30, 50}, {100, 0} };
    lv_line_set_points(obj, p, 3);
    lv_obj_center(obj);

}

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/362175.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【Python实战】一大波高颜值主播来袭：快看，某网站颜值排名，为了这个排名我可是大费周章啦，第一名不亏是你...（人脸检测+爬虫实战）

【Python实战】一大波高颜值主播来袭：快看，某网站颜值排名，为了这个排名我可是大费周章啦，第一名不亏是你...（人脸检测+爬虫实战）

导语 民间一直有个传闻......「听说某站的小哥哥小姐姐颜值都很高哦！」 （不是颜值高才能加入，是优秀的人恰好颜值高） 所有文章完整的素材源码都在👇👇 粉丝白嫖源码福利，请移步至CSDN社区或文末…
阅读更多...
Qt C++ 自定义仪表盘控件03

Qt C++ 自定义仪表盘控件03

简介仪表盘是工控领域不可缺少的一类软件UI元素，通常出现在各类电子看板软件上，以及一些高级的上位机软件界面上，目的是将繁杂的数据转化为可视化的图表能大幅提高后台管理效率。本文分享了几个经典常用的仪表盘控件，在项目中可以…
阅读更多...
系列一、SQL

系列一、SQL

一、SQL分类 二、DDL 定义：Data Definition Language，数据定义语言，用来定义数据库对象(数据库，表，字段) 2.1、数据库操作 2.1.1、查询所有数据库 show databases; 2.1.2、查询当前数据库 select database(); 2.…
阅读更多...
Pytorch平均池化nn.AvgPool2d()使用记录

Pytorch平均池化nn.AvgPool2d()使用记录

【pytorch官方文档】：https://pytorch.org/docs/stable/generated/torch.nn.AvgPool2d.html?highlightavgpool2d#torch.nn.AvgPool2dtorch.nn.AvgPool2d()作用在由多通道组成的输入特征中进行2D平均池化计算函数torch.nn.AvgPool2d(kernel_size, strideNone, paddi…
阅读更多...
在 ubuntu 中切换使用不同版本的 python

在 ubuntu 中切换使用不同版本的 python

引言有时我们不得不在同一台 ubuntu 中使用不同版本的 python 环境。本文的介绍就是可以在 ubuntu 上同时安装几个不同版本的 python，然后你可以随时指定当前要使用的 python 版本。步骤检查当前的 python 版本$ python3 --version python 3.6.8我的版本是 3.6.8假设…
阅读更多...
Renegade：基于MPC+Bulletproofs构建的anonymous DEX

Renegade：基于MPC+Bulletproofs构建的anonymous DEX

1. 引言 白皮书见： Renegade Whitepaper: Protocol Specification, v0.6 开源代码见： https://github.com/renegade-fi/renegade（Renegade p2p网络每个节点的核心网络和密码逻辑）https://github.com/renegade-fi/mpc-bulletpr…
阅读更多...
OSPF(开放式最短路径优先协议)、ACL（访问控制列表）、NAT

OSPF(开放式最短路径优先协议)、ACL（访问控制列表）、NAT

一、OSPF -- （开放式最短路径优先协议） 基于组播更新 --- 224.0.0.5 224.0.0.6 1、协议类型：无类别链路状态的IGP协议 无类别：带精确掩码链路状态：不共享路由，共享拓扑（共享LSA）…
阅读更多...
Windows平台Python编程必会模块之pywin32

Windows平台Python编程必会模块之pywin32

在Windows平台上，从原来使用C/C编写原生EXE程序，到使用Python编写一些常用脚本程序，成熟的模块的使用使得编程效率大大提高了。 不过，python模块虽多，也不可能满足开发者的所有需求。而且，模块为了便于使用…
阅读更多...
产品未出 百度朋友圈“开演”

产品未出 百度朋友圈“开演”

ChatGPT这股AI龙卷风刮到国内时，人们齐刷刷望向百度，这家在国内对AI投入最高的公司最终出手了，大模型新项目文心一言（ERNIE Bot）将在3月正式亮相，对标微软投资的ChatGPT。 文心一言产品未出，百…
阅读更多...
[python入门㊿] - python如何打断点

[python入门㊿] - python如何打断点

目录 ❤ 什么是bug(缺陷) ❤ python代码的调试方式 ❤ 使用 pdb 进行调试 测试代码示例 利用 pdb 调试 退出 debug debug 过程中打印变量 停止 debug 继续执行程序 debug 过程中显示代码 使用函数的例子 对函数进行 debug 在调试的时候动态改变值 ❤ 使用 PyC…
阅读更多...
el-cascader v-model 绑定值改变了，但是界面没变化

el-cascader v-model 绑定值改变了，但是界面没变化

查了很多资料，解决办法各异，但以下两个没有用 （1）this.$forceUpdate()强制更新渲染，没用。 （2）使用v-if和this.ifPanel false去控制el-cascader的显示，目的也是重新渲染&#xff…
阅读更多...
原生小程序中模板自定义组件事件

原生小程序中模板自定义组件事件

封装request.js请求文件目的：优化代码结构以及后期项目版本迭代和维护方便，提升代码的执行速度。假设:在原生page中使用基本写法创建ajax请求//发送请求了wx.request({url:"",method:"",data:"",success(res){//写业务操做…
阅读更多...
数据分片(mycat)

数据分片(mycat)

1. 数据分片概念： 1.1. 分库分表 什么是分库分表： 将存放在一台数据库服务器中的数据，按照特定方式（指的是程序开发的算法）进行拆分，分散存放到多台数据库服务器中，以达到分散单台服务器负载的…
阅读更多...
Vue使用distpicker插件实现省市级下拉框三级联动

Vue使用distpicker插件实现省市级下拉框三级联动

前言 这几天做项目，想着用一个全国省市区插件，之前就知道有几种，比如通过JSON文件生成对应的区域下拉框，element-china-are插件，包括distpicker插件 今天主要介绍的是如何使用distpicker插件实现省市级三联跳动 官网…
阅读更多...
2023年100道最新Android面试题，常见面试题及答案汇总

2023年100道最新Android面试题，常见面试题及答案汇总

除了需要掌握牢固的专业技术之外，还需要刷更多的面试去在众多的面试者中杀出重围。小编特意整理了100道Android面试题，送给大家，希望大家都能顺利通过面试，拿下高薪。赶紧拿去吧~~文末有答案Q1.组件化和arouter原理Q2.自定义view&…
阅读更多...
钣金行业mes解决方案，缩短产品在制周期

钣金行业mes解决方案，缩短产品在制周期

钣金加工行业具有多品种、小批量离散制造行业的典型特点。一些常见的下料车间、备料车间、冲压车间、冲剪生产线等。一般来说，核心业务是钣金加工的生产单位。 一般来说，与大规模生产相比，这种生产方式效率低、成本高，自动化难度…
阅读更多...
ur3+robotiq ft sensor+robotiq 2f 140配置gazebo仿真环境

ur3+robotiq ft sensor+robotiq 2f 140配置gazebo仿真环境

ur3robotiq ft sensorrobotiq 2f 140配置gazebo仿真环境 搭建环境： ubuntu: 20.04 ros: Nonetic sensor: robotiq_ft300 gripper: robotiq_2f_140_gripper UR: UR3 通过上一篇博客配置好ur3、力传感器和robotiq夹爪的rviz仿真环境后，现在来配置一下对…
阅读更多...
【读书笔记】《深入浅出数据分析》第一章 分解数据

【读书笔记】《深入浅出数据分析》第一章 分解数据

阅读第一章后，觉得本章重点不是在“分解数据”上，而是在对分析流程，分析步骤的引导。 1，确定问题 当业务方或者leader给你提诉求时，往往都是会比较模糊，他们会简单的说下诉求，然后给你一些数据…
阅读更多...
Spark介绍

Spark介绍

1、Spark是什么?类似与Hadoop的MapReduce的计算框架,基于map和reduce实现分布式计算,对比MapReduce可有效减少落盘次数,增加效率.任务之间通信交互不需要落盘,仅在shuffle时需要重新将数据排序分区落盘.Spark的缓存功能更加高效，特别是在SparkSQL中,一般是以列式存…
阅读更多...
学习.NET MAUI Blazor（六）、基于OpenAI接口的伪ChatGPT

学习.NET MAUI Blazor（六）、基于OpenAI接口的伪ChatGPT

ChatGPT不用介绍了。自从1月份开始到现在，火的不得了。网络上也充斥着各种教程，甚至还有号称是ChatGPT国内版的。那么ChatGPT到底有么有开放的API接口，那些打着ChatGPT的应用到底是如何实现的呢？ 其实，国内环境虽然无法…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023