2、LVGL控件-标签、按钮

本篇文章目录导航

♠♠ LVGL控件-标签、按钮
♣♣♣♣ 一、LVGL标签部件
♦♦♦♦♦♦♦♦ 1.1 标签部件组成部分
♦♦♦♦♦♦♦♦ 1.2 如何创建标签部件以及设置文本?
♦♦♦♦♦♦♦♦ 1.3 如何改变文本的样式?
♦♦♦♦♦♦♦♦ 1.4 当文本长度超过部件大小时怎么显示?
♦♦♦♦♦♦♦♦ 1.5 文本如何对齐标签?
♦♦♦♦♦♦♦♦ 1.6 如何让标签文本变得艺术化(字体阴影效果,样式Style)?
♣♣♣♣ 二、LVGL按钮部件
 


#LVGL控件-标签、按钮
##一、LVGL标签部件

在LVGL中,标签部件主要用于文本显示,例如标题、提示信息等。

效果图:


 


###1.1 标签部件组成部分
主体(LV_PART_MAIN):使用所有典型的背景属性和文本属性。填充值可用于在文本和背景之间添加空间。
滚动条(LV_PART_SCROLLBAR):当文本大于组件的大小时显示的滑动条。
选中的文本(LV_PART_SELECTED):告诉selected text的样式。只能使用text_color和bg_color样式属性。
 


###1.2 如何创建标签部件以及设置文本?

创建标签部件

lv_obj_t *label = lv_label_create(parent);

设置文本的三种方式(\n表示换行):
1、直接设置文本,存储文本的内存动态分配:

lv_label_set_text(label, "hallo \n lvgl");

2、文本不存储在动态内存,而是在指定的缓冲区中(慎用):

lv_label_set_text_static(label, "hallo");

3、格式化显示文本,类似printf:

lv_label_set_text_fmt(label, "Value:%d", 50); 

实验小演示1:创建标签部件并设置文本。

void my_gui(void)
{
    lv_obj_t *label = lv_label_create(lv_scr_act());    /* 创建标签部件 */
    lv_obj_center(label);                               /* 居中标签部件 */

    lv_label_set_text(label, "hello \n Couvrir");       /* 设置标签文本 */
}

演示图片:


 


###1.3 如何改变文本的样式?
1、背景颜色(一般背景透明度默认为0,值范围0~255):

lv_obj_set_style_bg_color(label, lv_color_hex(0xffe1d4), LV_STATE_DEFAULT);
lv_obj_set_style_bg_opa(label, 255, LV_STATE_DEFAULT);

2、字体大小(需要lv_conf.h中打开对应的字体宏):

点击2、LVGL控件-标签、按钮——古月居可查看全文

  • 3
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
LVGL 是一个开源的 GUI 库,提供了多种现成的控件,如按钮标签、列表等。如果你需要自定义控件,可以使用 LVGL 提供的绘图和事件处理接口实现。 下面是一个简单的示例,演示如何在 LVGL 中创建自定义控件: ```c // 自定义控件的绘制函数 static void draw_custom_control(lv_obj_t * obj, const lv_area_t * clip_area) { // 绘制控件的背景和边框 lv_draw_rect(&obj->coords, clip_area, LV_COLOR_WHITE, LV_COLOR_BLACK, LV_DRAW_BORDER | LV_DRAW_FULL_COVER); // 绘制控件的内容 lv_draw_label(&obj->coords, clip_area, LV_COLOR_BLACK, "Custom Control", NULL, LV_LABEL_ALIGN_CENTER); } // 自定义控件的事件处理函数 static bool custom_control_event_handler(lv_obj_t * obj, lv_event_t event) { if (event == LV_EVENT_CLICKED) { // 处理控件被点击的事件 lv_obj_set_style_local_bg_color(obj, LV_OBJ_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_RED); } return false; } // 创建自定义控件 lv_obj_t * custom_control_create(lv_obj_t * parent) { lv_obj_t * obj = lv_obj_create(parent, NULL); // 设置控件的大小和位置 lv_obj_set_size(obj, 100, 50); lv_obj_set_pos(obj, 50, 50); // 设置控件的绘制函数和事件处理函数 lv_obj_set_draw_func(obj, draw_custom_control); lv_obj_set_event_cb(obj, custom_control_event_handler); return obj; } ``` 在上面的示例中,我们创建了一个名为 `custom_control` 的自定义控件。`draw_custom_control` 函数用于绘制控件,`custom_control_event_handler` 函数用于处理控件的事件。在 `custom_control_create` 函数中,我们创建了一个 LVGL 对象,并设置了它的大小、位置、绘制函数和事件处理函数。最后,我们将对象返回给调用者。 使用上面的代码,你可以创建自己的 LVGL 控件并为其添加功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值