LVGL常用部件

已于 2024-06-05 21:46:45 修改
阅读量767 收藏 14
点赞数 21
分类专栏： LVGL 文章标签： LVGL
于 2024-05-16 20:17:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45930573/article/details/138866942
版权

目录

 一、标签

二、按钮

三、开关

 四、复选框部件（开关+标签）

五、进度条部件

六、列表部件

七、下拉列表

八、图片部件  

九、按钮矩阵部件

十、文本区域部件

十一、键盘部件

十二、选项卡部件

十三、消息框部件

十四、线条部件

十五、窗口部件

十六、平铺视图部件

十七、滚轮部件

十八、滑块部件

十九、图片按钮部件

一、标签

1.1 设置文本

    lv_obj_t* label = lv_label_create(lv_scr_act());
    //1.直接设置文本，存储文本的内存动态分配
    lv_label_set_text(label, "hello");
    //2.文本不存储在动态内存，而是在指定的缓冲区中（慎用）
    lv_label_set_text_static(label, "hello");
    //3.格式化显示文本，类似printf
    lv_label_set_text_fmt(label, "hello%d", 5);

 1.2 背景颜色

    lv_obj_t* label = lv_label_create(lv_scr_act());
    lv_label_set_text(label, "hello");
    //需要设置背景透明度，否则没用
    lv_obj_set_style_bg_color(label, lv_color_hex(0xff000), LV_STATE_DEFAULT);
    //透明度0-255
    lv_obj_set_style_bg_opa(label, 100, LV_STATE_DEFAULT);

1.3 字体大小 

//注意勿忘&
lv_obj_set_style_text_font(label, &lv_font_montserrat_30, LV_STATE_DEFAULT);

1.4 文本颜色

    //1.普通设置文本颜色
    lv_obj_set_style_text_color(label, lv_color_hex(0x5084db), LV_STATE_DEFAULT);
    //2.只对文本的一部分进行着色，开启重新着色
    lv_label_set_recolor(label, true);
    //注意书写格式
    lv_label_set_text(label,"he#ff0000 llo#");

1.5 长文本模式 

默认情况下，如果没有限定标签部件大小，那它的大小自动扩展为文本大小。

 LV_LABEL_LONG_WRAP,      / /默认模式, 如果部件大小已固定，超出的文本将被剪切    

LV_LABEL_LONG_DOT,                      /* 将 label 右下角的最后 3 个字符替换为点… */     LV_LABEL_LONG_SCROLL,                   /* 来回滚动 */     LV_LABEL_LONG_SCROLL_CIRCULAR,      /* 循环滚动 */    

LV_LABEL_LONG_CLIP,                     /* 直接剪切掉部件外面的文本部分 */

    lv_obj_t* label = lv_label_create(lv_scr_act());
    lv_label_set_text(label, "hellohellohellohellohellohelloh");
    lv_obj_set_size(label, 100,50);

    lv_label_set_long_mode(label, LV_LABEL_LONG_DOT);
    lv_label_set_long_mode(label, LV_LABEL_LONG_SCROLL);
    lv_label_set_long_mode(label, LV_LABEL_LONG_SCROLL_CIRCULAR);
    lv_label_set_long_mode(label, LV_LABEL_LONG_CLIP);

二、按钮

2.1 创建按钮部件

lv_obj_t* btn;
static void event_cb(lv_event_t* e)
{
    lv_event_code_t code = lv_event_get_code(e);
    if(code == LV_EVENT_CLICKED)
    {
       lv_obj_set_style_bg_color(btn, lv_color_hex(0xde4d3e),LV_STATE_DEFAULT);
    }
     else if(code == LV_EVENT_VALUE_CHANGED)
    {
        printf("11111\n");
    }
}
//主程序
void my_gui(void)
{
    btn = lv_btn_create(lv_scr_act());
    lv_obj_set_size(btn, 100, 50);
    lv_obj_set_align(btn, LV_ALIGN_CENTER);
    //1.点击按钮变色，释放恢复
    lv_obj_set_style_bg_color(btn, lv_color_hex(0xde4d3e),LV_STATE_PRESSED);
    //2.利用事件：点击后变色，释放保持不变
    lv_obj_add_event_cb(btn, event_cb, LV_EVENT_CLICKED, NULL);
    //3.lvgl自带函数，快速实现按钮颜色变化
    lv_obj_add_flag(btn, LV_OBJ_FLAG_CHECKABLE);
    //注意事件类型
    lv_obj_add_event_cb(btn, event_cb, LV_EVENT_VALUE_CHANGED, NULL);
}

2.2 应用

lv_obj_t* label;
lv_obj_t* btnAdd;
lv_obj_t* btnSub;
lv_obj_t* btnPause;
int num = 0;
//定义速度显示标签
static void lv_label(void)
{
    label = lv_label_create(lv_scr_act());
    lv_label_set_text_fmt(label, "Speed: %d RPM",num);
    lv_obj_set_style_text_font(label, &lv_font_montserrat_20, LV_PART_MAIN);
    lv_obj_align(label, LV_ALIGN_CENTER,0,-200);
}
//事件处理函数
static void event_cb(lv_event_t* e)
{
    lv_obj_t* target = lv_event_get_target(e);
    if(target == btnAdd)
    {
        num += 30;
        lv_label_set_text_fmt(label, "Speed: %d RPM",num);
    }
    else if(target == btnSub)
    {
        num -= 30;
        lv_label_set_text_fmt(label, "Speed: %d RPM",num);
    }
    else if(target == btnPause)
    {
        lv_label_set_text_fmt(label, "Speed: %d RPM",0);
    }
}
//速度加
static void lv_btn_SpeedAdd(void)
{
    btnAdd = lv_btn_create(lv_scr_act());
    lv_obj_set_size(btnAdd, lv_obj_get_width(lv_scr_act())/4, lv_obj_get_height(lv_scr_act())/6);
    lv_obj_set_align(btnAdd, LV_ALIGN_LEFT_MID);

    lv_obj_t* btnAdd_label = lv_label_create(btnAdd);
    lv_label_set_text(btnAdd_label, "Speed+");
    lv_obj_set_style_text_font(btnAdd_label, &lv_font_montserrat_20, LV_PART_MAIN);
    lv_obj_set_align(btnAdd_label, LV_ALIGN_CENTER);

    lv_obj_add_event_cb(btnAdd, event_cb, LV_EVENT_CLICKED, NULL);
}
//速度减
static void lv_btn_SpeedSub(void)
{
    btnSub = lv_btn_create(lv_scr_act());
    lv_obj_set_size(btnSub, lv_obj_get_width(lv_scr_act())/4, lv_obj_get_height(lv_scr_act())/6);
    lv_obj_set_align(btnSub, LV_ALIGN_CENTER);

    lv_obj_t* btnSub_label = lv_label_create(btnSub);
    lv_label_set_text(btnSub_label, "Speed-");
    lv_obj_set_style_text_font(btnSub_label, &lv_font_montserrat_20, LV_PART_MAIN);
    lv_obj_set_align(btnSub_label, LV_ALIGN_CENTER);

    lv_obj_add_event_cb(btnSub, event_cb, LV_EVENT_CLICKED, NULL);
}
//终止
static void lv_btn_SpeedPause(void)
{
    btnPause = lv_btn_create(lv_scr_act());
    lv_obj_set_size(btnPause, lv_obj_get_width(lv_scr_act())/4, lv_obj_get_height(lv_scr_act())/6);
    lv_obj_set_align(btnPause, LV_ALIGN_RIGHT_MID);
    lv_obj_set_style_bg_color(btnPause,lv_color_hex(0xde1c31), LV_STATE_DEFAULT);

    lv_obj_t* btnPause_label = lv_label_create(btnPause);
    lv_label_set_text(btnPause_label, "Pause");
    lv_obj_set_style_text_font(btnPause_label, &lv_font_montserrat_20, LV_PART_MAIN);
    lv_obj_set_align(btnPause_label, LV_ALIGN_CENTER);

    lv_obj_add_event_cb(btnPause, event_cb, LV_EVENT_CLICKED, NULL);
}
//主程序
void my_gui(void)
{
    lv_label();
    lv_btn_SpeedAdd();
    lv_btn_SpeedSub();
    lv_btn_SpeedPause();
}

三、开关

3.1 创建开关部件 

    lv_obj_t* switch1 = lv_switch_create(lv_scr_act());
    //改变主体颜色
    lv_obj_set_style_bg_color(switch1, lv_color_hex(0xdf5345), LV_PART_MAIN);
    //改变手柄颜色
    lv_obj_set_style_bg_color(switch1, lv_color_hex(0xdf5345), LV_PART_KNOB);
    //改变指示器颜色，不加LV_STATE_CHECKED没有效果
    lv_obj_set_style_bg_color(switch1, lv_color_hex(0xdf5345), LV_STATE_CHECKED|LV_PART_INDICATOR);

3.2 程序设定开关状态 

     //添加状态：默认打开且不可修改
    lv_obj_add_state(switch1, LV_STATE_CHECKED | LV_STATE_DISABLED);
    //清除开关的状态
    lv_obj_clear_state(switch1, LV_STATE_CHECKED | LV_STATE_DISABLED);

3.3 获取开关状态 

lv_obj_t* switch1;
static void event_cb(lv_event_t* e)
{
    lv_event_code_t code = lv_event_get_code(e);
    if(code == LV_EVENT_VALUE_CHANGED)
    {
        if(lv_obj_has_state(switch1, LV_STATE_CHECKED))
            printf("LED ON\n");
        else
            printf("LED OFF\n");
    }
}
//主程序
void my_gui(void)
{
    switch1 = lv_switch_create(lv_scr_act());
    lv_obj_add_event_cb(switch1, event_cb, LV_EVENT_VALUE_CHANGED, NULL);
}

3.4 应用

#include "my_gui.h"
#include "lvgl.h"

lv_obj_t* label;
lv_obj_t* switchCool;
lv_obj_t* switchHeart;
lv_obj_t* switchDry;

//定义速度显示标签
static void lv_label(void)
{
    label = lv_label_create(lv_scr_act());
    lv_label_set_text_fmt(label, "Control Center");
    lv_obj_set_style_text_font(label, &lv_font_montserrat_20, LV_PART_MAIN);
    lv_obj_align(label, LV_ALIGN_CENTER,0,-200);
}
//事件处理函数
static void event_cb(lv_event_t* e)
{
    lv_obj_t* target = lv_event_get_target(e);
    if(target == switchCool)
    {
        if(lv_obj_has_state(switchCool, LV_STATE_CHECKED))
            lv_obj_clear_state(switchHeart,LV_STATE_CHECKED);
    }
    else if(target == switchHeart)
    {
        if(lv_obj_has_state(switchHeart, LV_STATE_CHECKED))
            lv_obj_clear_state(switchCool,LV_STATE_CHECKED);
    }
}
//制冷
static void lv_switch_Cool(void)
{
    //创建背景图
    lv_obj_t* menu1 = lv_obj_create(lv_scr_act());
    lv_obj_set_size(menu1, 150,150);
    lv_obj_align(menu1, LV_ALIGN_LEFT_MID,40,0);

    //制冷标签
    lv_obj_t* labelCool = lv_label_create(menu1);
    lv_label_set_text_fmt(labelCool, "Cool");
    lv_obj_set_style_text_font(labelCool, &lv_font_montserrat_20, LV_PART_MAIN);
    lv_obj_set_align(labelCool, LV_ALIGN_TOP_MID);

    //开关
    switchCool = lv_switch_create(menu1);
    lv_obj_set_size(switchCool, 100, 50);
    lv_obj_align(switchCool, LV_ALIGN_CENTER,0,10);

    lv_obj_add_event_cb(switchCool, event_cb, LV_EVENT_VALUE_CHANGED, NULL);
}
//制热
static void lv_switch_Heat(void)
{
    //创建背景图
    lv_obj_t* menu2 = lv_obj_create(lv_scr_act());
    lv_obj_set_size(menu2, 150,150);
    lv_obj_set_align(menu2, LV_ALIGN_CENTER);

    //制热标签
    lv_obj_t* labelHeart = lv_label_create(menu2);
    lv_label_set_text_fmt(labelHeart, "Heart");
    lv_obj_set_style_text_font(labelHeart, &lv_font_montserrat_20, LV_PART_MAIN);
    lv_obj_set_align(labelHeart, LV_ALIGN_TOP_MID);

    //开关
    switchHeart = lv_switch_create(menu2);
    lv_obj_set_size(switchHeart, 100, 50);
    lv_obj_align(switchHeart, LV_ALIGN_CENTER,0,10);

    lv_obj_add_event_cb(switchHeart, event_cb, LV_EVENT_VALUE_CHANGED, NULL);
}

//干燥
static void lv_switch_Dry(void)
{
    //创建背景图
    lv_obj_t* menu3 = lv_obj_create(lv_scr_act());
    lv_obj_set_size(menu3, 150,150);
    lv_obj_align(menu3, LV_ALIGN_RIGHT_MID,-40,0);

    //干燥标签
    lv_obj_t* labelDry = lv_label_create(menu3);
    lv_label_set_text_fmt(labelDry, "Dry");
    lv_obj_set_style_text_font(labelDry, &lv_font_montserrat_20, LV_PART_MAIN);
    lv_obj_set_align(labelDry, LV_ALIGN_TOP_MID);

    //开关
    switchDry = lv_switch_create(menu3);
    lv_obj_set_size(switchDry, 100, 50);
    lv_obj_align(switchDry, LV_ALIGN_CENTER,0,10);
    lv_obj_add_state(switchDry, LV_STATE_CHECKED | LV_STATE_DISABLED);
}
//主程序
void my_gui(void)
{
    lv_label();
    lv_switch_Cool();
    lv_switch_Heat();
    lv_switch_Dry();
}

 四、复选框部件（开关+标签）

4.1 文本设置

    lv_obj_t* checkbox = lv_checkbox_create(lv_scr_act());
    lv_checkbox_set_text(checkbox, "password");
    lv_obj_set_align(checkbox, LV_ALIGN_CENTER);
    //设置勾选框与文本框间距
    lv_obj_set_style_pad_column(checkbox, 50, LV_STATE_DEFAULT);

4.2 设定复选框状态

    /* 添加状态：默认选中且不可修改 */
    lv_obj_add_state(checkbox, LV_STATE_CHECKED | LV_STATE_DISABLED);	
    /* 清除复选框的状态 */
    lv_obj_clear_state(checkbox, LV_STATE_CHECKED | LV_STATE_DISABLED);

4.3 获取复选框状态

/* 返回值：1，选中； 0，非选中 */
lv_obj_has_state(checkbox, LV_STATE_CHECKED);

五、进度条部件

5.1 创建进度条部件

    lv_obj_t* bar = lv_bar_create(lv_scr_act());

5.2 设置大小、当前值、范围值、动画时间

    //设定大小
    lv_obj_set_size(bar, 400, 20);
    //动画设置必须放在当前值设置之前
    //500为加载时间参数
    lv_obj_set_style_anim_time( bar, 500, LV_STATE_DEFAULT);
    //加载到50
    lv_bar_set_value(bar, 50, LV_ANIM_ON);
    //进度条范围-100~100
    lv_bar_set_range(bar, -100, 100);

5.3 应用

//定义标签
static void lv_label(void)
{
    label = lv_label_create(lv_scr_act());
    lv_label_set_text(label, "0 \%");
    lv_obj_set_style_text_font(label, &lv_font_montserrat_20, LV_PART_MAIN);
    lv_obj_align(label, LV_ALIGN_CENTER,0,100);
}
int val = 0;
static void timer_cb(lv_timer_t* timer)
{
    if(val < 100)
    {
        val++;
        lv_bar_set_value(bar, val, LV_ANIM_ON);
        lv_label_set_text_fmt(label, "%d %%",lv_bar_get_value(bar));
    }
    else
         lv_label_set_text(label, "finished!");
}
//定义进度条
static void lv_bar()
{
    bar = lv_bar_create(lv_scr_act());
    lv_obj_set_size(bar, 400, 20);
    lv_obj_set_align(bar,LV_ALIGN_CENTER);
    //定时器，每隔50ms进入一次timer_cb
    lv_timer_create(timer_cb, 50, NULL);
}
//主程序
void my_gui(void)
{
    lv_label();
    lv_bar();
}

六、列表部件

6.1 创建列表部件 

    //1.创建列表
    lv_obj_t* list = lv_list_create(lv_scr_act());
    lv_obj_set_size(list, 200, 400);
    lv_obj_set_align(list, LV_ALIGN_CENTER);
    //2.添加列表文本
    lv_list_add_text(list, "Settings");

6.2  添加列表按钮

    lv_obj_t* btn1 = lv_list_add_btn(list, LV_SYMBOL_WIFI, "WIFI");
    lv_obj_t* btn2 = lv_list_add_btn(list, LV_SYMBOL_WIFI, "WIFI");
    lv_obj_t* btn3 = lv_list_add_btn(list, LV_SYMBOL_WIFI, "WIFI");
    lv_obj_t* btn4 = lv_list_add_btn(list, LV_SYMBOL_WIFI, "WIFI");
    lv_obj_t* btn5 = lv_list_add_btn(list, LV_SYMBOL_WIFI, "WIFI");

 6.3 获取列表按钮文本

lv_obj_add_event_cb(btn1, event_cb, LV_EVENT_CLICKED, NULL);

static void event_cb(lv_event_t* e)
{
    lv_obj_t* target = lv_event_get_target(e);
    printf("%s", lv_list_get_btn_text(list, target));
}

6.4 应用

static void event_cb(lv_event_t* e)
{
    lv_obj_t* target = lv_event_get_target(e);
    lv_label_set_text(label, lv_list_get_btn_text(list, target));
    //选中后此栏变蓝
    lv_obj_add_state(target, LV_STATE_FOCUS_KEY);
}
//主程序
void my_gui(void)
{
    //标签
    label = lv_label_create(lv_scr_act());
    lv_label_set_text(label, "0");
    lv_obj_set_style_text_font(label, &lv_font_montserrat_20, LV_PART_MAIN);
    lv_obj_set_align(label, LV_ALIGN_RIGHT_MID);
    //1.创建列表
    list = lv_list_create(lv_scr_act());
    lv_obj_set_size(list, 200, 400);
    lv_obj_set_align(list, LV_ALIGN_CENTER);
    //2.添加列表文本
    lv_list_add_text(list, "Settings1");
    btn1 = lv_list_add_btn(list, LV_SYMBOL_WIFI, "WIFI");
    lv_obj_add_event_cb(btn1, event_cb, LV_EVENT_CLICKED, NULL);
    btn2 = lv_list_add_btn(list, LV_SYMBOL_FILE, "FILE");
    lv_obj_add_event_cb(btn2, event_cb, LV_EVENT_CLICKED, NULL);
    lv_list_add_text(list, "Settings2");
    btn3 = lv_list_add_btn(list, LV_SYMBOL_GPS, "GPS");
    lv_obj_add_event_cb(btn3, event_cb, LV_EVENT_CLICKED, NULL);
    btn4 = lv_list_add_btn(list, LV_SYMBOL_KEYBOARD, "KEYBOARD");
    lv_obj_add_event_cb(btn4, event_cb, LV_EVENT_CLICKED, NULL);
}

七、下拉列表

八、图片部件  

 8.1 创建图片部件

1.选择图片，进入lvgl官网转换成数组形式的img_test.c文件

2.添加到工程中

    lv_obj_t* img = lv_img_create(lv_scr_act());
    //声明图片
    LV_IMG_DECLARE(img_test);
    //设置图片源
    lv_img_set_src(img, &img_test);

8.2 设置图片偏移

    lv_img_set_offset_x(img, 40);
    lv_img_set_offset_y(img, 40);

8.3 设置图片重新着色

8.4 设置图片缩放、旋转

    lv_img_set_zoom(img, 512);
    //顺时针旋转90度
    lv_img_set_angle(img, 900);

 8.5 设置中心点

    //更新图片布局信息
    lv_obj_update_layout(img);
    //设置中心点，旋转时
    lv_img_set_pivot(img, 0,0);

九、按钮矩阵部件

9.1 创建按钮矩阵部件 

    //创建按钮矩阵
    lv_obj_t* btnm = lv_btnmatrix_create(lv_scr_act());
    //定义按钮数组，最后一个元素必须为空
    static const char* map[] = {"btn1", "\n", "btn2", "btn3", ""};
    //设置按钮
    lv_btnmatrix_set_map(btnm, map);

 9.2 设置按钮相对宽度

    //参数2 0：btn1, 1:btn2, 2:btn3
    //参数3 btn3相对btn2的宽度为2倍
    lv_btnmatrix_set_btn_width(btnm, 1,2);
    lv_btnmatrix_set_btn_width(btnm, 2,1);

9.3 获取按钮索引、文本 

/* 获取索引 */
lv_btnmatrix_get_selected_btn(btnm);	
/* 获取文本 */		
lv_btnmatrix_get_btn_text(btnm, id);

9.4 设置、清楚按钮属性 

enum {

LV_BTNMATRIX_CTRL_HIDDEN,                   /* 隐藏 ，仍占用内存*/     LV_BTNMATRIX_CTRL_DISABLED,              /* 失能，按钮不可选中 */     LV_BTNMATRIX_CTRL_CHECKABLE,          /* 允许状态切换，点击按钮变蓝 */     LV_BTNMATRIX_CTRL_RECOLOR,              /* 允许文本重新着色 */ };

    lv_btnmatrix_set_btn_ctrl(btnm, 0, LV_BTNMATRIX_CTRL_CHECKABLE);
    //清楚上面设置的效果
    lv_btnmatrix_clear_btn_ctrl(btnm, 0, LV_BTNMATRIX_CTRL_CHECKABLE);
    //设置所有按钮
    lv_btnmatrix_set_btn_ctrl_all(btnm, LV_BTNMATRIX_CTRL_CHECKABLE);
    //改变颜色，注意map数组中内容要更改
    lv_btnmatrix_set_btn_ctrl(btnm, 0, LV_BTNMATRIX_CTRL_RECOLOR);
    static const char* map[] = {"#ff0000 btn1#", "\n", "btn2", "btn3", ""};

 9.5 设置单次选中属性

//需要先设置允许状态切换属性
//所有按钮中只能有一个按钮可被选中
lv_btnmatrix_set_one_checked(btnm, true);

9.6 应用

static void event_cb(lv_event_t* e)
{
    uint8_t id;
    lv_obj_t* target = lv_event_get_target(e);
    id = lv_btnmatrix_get_selected_btn(target);
    lv_label_set_text(input_label, lv_btnmatrix_get_btn_text(target, id));
}
void my_gui(void)
{
//1.创建USER标签
    label = lv_label_create(lv_scr_act());
    lv_label_set_text(label, "USER");
    lv_obj_set_style_text_font(label, &lv_font_montserrat_20, LV_PART_MAIN);
    lv_obj_align(label, LV_ALIGN_LEFT_MID,150,-100);
//2.创建输入框
    input = lv_obj_create(lv_scr_act());
    lv_obj_set_size(input, 170,40);
    lv_obj_align_to(input, label, LV_ALIGN_OUT_BOTTOM_MID,0,20);
    //去除边框
    lv_obj_set_style_border_width(input, 0 ,0);
    //设置圆角
    lv_obj_set_style_radius(input, 20,0);
    //去除滚动条
    lv_obj_remove_style(input, NULL, LV_PART_SCROLLBAR);
//3.创建输入框标签
    input_label = lv_label_create(input);
    lv_obj_align_to(input_label, input,LV_ALIGN_TOP_MID,0, -10);
    lv_obj_set_size(input_label, 40, 40);
    lv_obj_set_style_text_font(input_label, &lv_font_montserrat_22, LV_PART_MAIN);
    lv_label_set_text(input_label, "");
//4.设置按钮矩阵
    btnm = lv_btnmatrix_create(lv_scr_act());
    //定义按钮数组，最后一个元素必须为空
    static const char* map[] = {"1", "2","3","\n",
                                "4", "5","6","\n",
                                "7", "8","9","\n",
                                "#", "0","%","",};
    //设置按钮
    lv_btnmatrix_set_map(btnm, map);
    lv_obj_align(btnm, LV_ALIGN_RIGHT_MID, -50, 0);
    lv_obj_set_size(btnm, 300, 300);
    lv_obj_set_style_text_font(btnm, &lv_font_montserrat_24, LV_PART_ITEMS);
//    lv_btnmatrix_set_btn_ctrl_all(btnm, LV_BTNMATRIX_CTRL_CHECKABLE);
//    lv_btnmatrix_set_one_checked(btnm, true);
//5.按钮矩阵（优化界面）
    //去除边框
    lv_obj_set_style_border_width(btnm, 0,LV_PART_MAIN);
    //主体背景透明度
    lv_obj_set_style_bg_opa(btnm, 0, LV_PART_MAIN);
    //按钮背景透明度
    lv_obj_set_style_bg_opa(btnm, 0, LV_PART_ITEMS);
    //去除按钮阴影
    lv_obj_set_style_shadow_width(btnm, 0, LV_PART_ITEMS);
    lv_obj_add_event_cb(btnm, event_cb, LV_EVENT_PRESSED, NULL);
}

十、文本区域部件

10.1 添加文本与设置光标位置

    lv_obj_t* ta = lv_textarea_create(lv_scr_act());
    //1.添加文本
    lv_textarea_add_char(ta, 'A');
    lv_textarea_add_text(ta, "BCD");
    //2.设置光标位置
    //0:最左侧； LV_TEXTAREA_CURSOR_LAST：最右侧
    lv_textarea_set_cursor_pos(ta, 0);

10.2 删除文本

    //删除光标左侧的一个字符
    lv_textarea_del_char(ta);
    //删除光标右侧的一个字符
    lv_textarea_del_char_forward(ta);

10.3 设置模式

    //当文本过长时，会默认换行，下面的函数只显示在一行上
    lv_textarea_set_one_line(ta, true);
    //密码模式
    lv_textarea_set_password_mode(ta, true);
    //设定密码隐藏时间,单位：ms
    lv_textarea_set_password_show_time(ta, 100);

 10.4 限制字符输入

    //只能输入这10个数字
    lv_textarea_set_accepted_chars(ta, "0123456789");
    //输入长度为6，超出在输入没用
    lv_textarea_set_max_length(ta, 6);

10.5 占位符、获取文本、比对文本 

    //占位符，提示输入密码
    lv_textarea_set_placeholder_text(ta, "password");
    //获取文本
    const char* txt = lv_textarea_get_text(ta);
    //比对文本内容
    //当s1 = s2时，返回0
    strcmp(txt, "123456");

 10.6 应用

static void event_cb(lv_event_t* e)
{
    lv_event_code_t code = lv_event_get_code(e);
    lv_obj_t* target = lv_event_get_target(e);
    if(target == ta)
    {
        if(code == LV_EVENT_FOCUSED) //选中与键盘进行关联
        {
            lv_keyboard_set_textarea(keyboard,ta);
        }
        else if(code == LV_EVENT_VALUE_CHANGED)
        {
            const char* txt = lv_textarea_get_text(ta);
            if(strcmp(txt, "admin") == 0)
                lv_label_set_text(label_user, LV_SYMBOL_OK);
            else
                lv_label_set_text(label_user, "");
        }
    }
    else if(target == ta_password)
    {
        if(code == LV_EVENT_FOCUSED)
        {
            lv_keyboard_set_textarea(keyboard,ta_password);
        }
        else if(code == LV_EVENT_VALUE_CHANGED)
        {
            const char* txt2 = lv_textarea_get_text(ta_password);
            if(strcmp(txt2, "123456") == 0)
                lv_label_set_text(label_password, LV_SYMBOL_OK);
            else
                lv_label_set_text(label_password, "");
        }
    }
}
void my_gui(void)
{
//1.设置用户输入文本框
    ta = lv_textarea_create(lv_scr_act());
    lv_obj_set_size(ta, 300, 40);
    lv_obj_align(ta, LV_ALIGN_TOP_MID, 0, 40);
    lv_obj_remove_style(ta, NULL, LV_PART_SCROLLBAR);
    lv_textarea_set_password_mode(ta, true);
    lv_textarea_set_placeholder_text(ta, "username");
    lv_obj_add_event_cb(ta, event_cb, LV_EVENT_ALL,NULL);
//2.设置密码输入文本框
    ta_password = lv_textarea_create(lv_scr_act());
    lv_obj_set_size(ta_password, 300, 40);
    lv_obj_align_to(ta_password,ta,LV_ALIGN_OUT_BOTTOM_MID, 0, 40);
    lv_obj_remove_style(ta_password, NULL, LV_PART_SCROLLBAR);
    lv_textarea_set_password_mode(ta_password, true);
    lv_textarea_set_placeholder_text(ta_password, "password");
    lv_obj_add_event_cb(ta_password, event_cb, LV_EVENT_ALL,NULL);
//3.创建user标签
    label_user = lv_label_create(lv_scr_act());
    lv_label_set_text(label_user, "");
    lv_obj_set_style_text_font(label_user, &lv_font_montserrat_20, LV_PART_MAIN);
    lv_obj_align_to(label_user,ta, LV_ALIGN_OUT_RIGHT_MID,30,0);
//4.创建password标签
    label_password = lv_label_create(lv_scr_act());
    lv_label_set_text(label_password, "");
    lv_obj_set_style_text_font(label_password, &lv_font_montserrat_20, LV_PART_MAIN);
    lv_obj_align_to(label_password,ta_password, LV_ALIGN_OUT_RIGHT_MID,30,0);
//设置键盘
    keyboard = lv_keyboard_create(lv_scr_act());
}

十一、键盘部件

11.1 键盘与文本框相关联 

lv_obj_t  *kb = lv_keyboard_create(lv_scr_act());
//创建文本框
v_obj_t *ta = lv_textarea_create(lv_scr_act());		
//键盘与文本框关联	
lv_keyboard_set_textarea(kb, ta);

 11.2 设置按键弹窗

lv_keyboard_set_popovers(kb, true);

11.3  设置数字键盘模式

lv_keyboard_set_mode(keyboard, LV_KEYBOARD_MODE_NUMBER);

11.4 应用

static void event_cb(lv_event_t* e)
{
    lv_event_code_t code = lv_event_get_code(e);
    lv_obj_t* target = lv_event_get_target(e);
    if(code == LV_EVENT_PRESSED)
    {
        uint16_t id = lv_btnmatrix_get_selected_btn(target);
        const char* txt = lv_btnmatrix_get_btn_text(target,id);
        //判断点击的是键盘按钮
        if(strcmp(txt, LV_SYMBOL_KEYBOARD) == 0)
        {
            if(lv_keyboard_get_mode(target) == LV_KEYBOARD_MODE_NUMBER)
            {
                lv_keyboard_set_mode(target,LV_KEYBOARD_MODE_TEXT_LOWER);
                lv_obj_set_size(keyboard, 400, 200);
            }
            else
            {
                lv_keyboard_set_mode(target,LV_KEYBOARD_MODE_NUMBER);
                lv_obj_set_size(keyboard, 200, 200);
            }
        }
    }
}

十二、选项卡部件

12.1 创建选项卡部件

    //所放父类；标签栏位置；标签栏宽度
    lv_obj_t* tabview = lv_tabview_create(lv_scr_act(), LV_DIR_TOP, 50);
    //选项卡命名
    lv_obj_t* tab1 = lv_tabview_add_tab(tabview, "tab1");
    lv_obj_t* tab2 = lv_tabview_add_tab(tabview, "tab2");
    //设置当前选中的选项卡
    lv_tabview_set_act(tabview, 1, LV_ANIM_OFF);

12.2 获取选项卡的按钮、主体 

    //获取按钮
    lv_obj_t* btn1 = lv_tabview_get_tab_btns(tabview);
    //获取主体
    lv_obj_t* obj = lv_tabview_get_content(tabview);

十三、消息框部件

13.1 创建消息框部件 

 static const char *btns[] = { "Continue", "Close", "" };
 lv_obj_t *msgbox = lv_msgbox_create( lv_scr_act(), "Notice", "Do you want to continue?", btns, true );

13.2 获取按钮索引、文本

/* 获取当前触发源，注意current*/
lv_obj_t *target = lv_event_get_current_target(e);	
/* 获取按钮索引 */				
lv_msgbox_get_active_btn(target);
/* 获取按钮文本 */							
lv_msgbox_get_active_btn_text(target);

13.3 应用 

static void event_cb(lv_event_t* e)
{
    lv_event_code_t code = lv_event_get_code(e);
    lv_obj_t* target = lv_event_get_target(e);
    if(target == ta)
    {
        if(code == LV_EVENT_FOCUSED) //选中与键盘进行关联
        {
            lv_keyboard_set_textarea(keyboard,ta);
        }
        else if(code == LV_EVENT_VALUE_CHANGED)
        {
            const char* txt = lv_textarea_get_text(ta);
            if(strcmp(txt, "admin") == 0)
                lv_label_set_text(label_user, LV_SYMBOL_OK);
            else
                lv_label_set_text(label_user, "");
        }
    }
    else if(target == ta_password)
    {
        if(code == LV_EVENT_FOCUSED)
        {
            lv_keyboard_set_textarea(keyboard,ta_password);
        }
        else if(code == LV_EVENT_VALUE_CHANGED)
        {
            const char* txt2 = lv_textarea_get_text(ta_password);
            if(strcmp(txt2, "123456") == 0)
                lv_label_set_text(label_password, LV_SYMBOL_OK);
            else
                lv_label_set_text(label_password, "");
        }
    }
}
static void event_cb_msgbox(lv_event_t* e)
{
    lv_event_code_t code = lv_event_get_code(e);
    lv_obj_t *target = lv_event_get_current_target(e);
    if(code == LV_EVENT_VALUE_CHANGED)
    {
        const char* txt = lv_textarea_get_text(ta);
        const char* txt3 = lv_textarea_get_text(ta_password);
        if(strcmp(txt, "admin") == 0 && strcmp(txt3, "123456") == 0)
                lv_obj_clear_flag(msgbox, LV_OBJ_FLAG_HIDDEN);
    }
    else if(code == LV_EVENT_PRESSED)
    {
        if(lv_msgbox_get_active_btn(msgbox) == 2)    /* 获取按钮索引 */
            lv_obj_add_flag(msgbox, LV_OBJ_FLAG_HIDDEN);  /* 隐藏消息框 */
    }
}
void my_gui(void)
{
//1.设置用户输入文本框
    ta = lv_textarea_create(lv_scr_act());
    lv_obj_set_size(ta, 300, 40);
    lv_obj_align(ta, LV_ALIGN_TOP_MID, 0, 40);
    lv_obj_remove_style(ta, NULL, LV_PART_SCROLLBAR);
    lv_textarea_set_password_mode(ta, true);
    lv_textarea_set_placeholder_text(ta, "username");
    lv_obj_add_event_cb(ta, event_cb, LV_EVENT_ALL,NULL);
//2.设置密码输入文本框
    ta_password = lv_textarea_create(lv_scr_act());
    lv_obj_set_size(ta_password, 300, 40);
    lv_obj_align_to(ta_password,ta,LV_ALIGN_OUT_BOTTOM_MID, 0, 40);
    lv_obj_remove_style(ta_password, NULL, LV_PART_SCROLLBAR);
    lv_textarea_set_password_mode(ta_password, true);
    lv_textarea_set_placeholder_text(ta_password, "password");
    lv_obj_add_event_cb(ta_password, event_cb, LV_EVENT_ALL,NULL);
//3.创建user标签
    label_user = lv_label_create(lv_scr_act());
    lv_label_set_text(label_user, "");
    lv_obj_set_style_text_font(label_user, &lv_font_montserrat_20, LV_PART_MAIN);
    lv_obj_align_to(label_user,ta, LV_ALIGN_OUT_RIGHT_MID,30,0);
//4.创建password标签
    label_password = lv_label_create(lv_scr_act());
    lv_label_set_text(label_password, "");
    lv_obj_set_style_text_font(label_password, &lv_font_montserrat_20, LV_PART_MAIN);
    lv_obj_align_to(label_password,ta_password, LV_ALIGN_OUT_RIGHT_MID,30,0);
//5.设置键盘
    keyboard = lv_keyboard_create(lv_scr_act());
//6.设置消息框
     static const char *btns[] = { " ", " ", "OK","" };
     msgbox = lv_msgbox_create( lv_scr_act(), LV_SYMBOL_SETTINGS"Notice", "Do you want to continue?", btns, true );
     lv_obj_set_align(msgbox, LV_ALIGN_CENTER);
     lv_obj_add_flag(msgbox, LV_OBJ_FLAG_HIDDEN);
     //获取到按钮部分
     lv_obj_t* btn = lv_msgbox_get_btns(msgbox);
     //按钮背景设为透明
     lv_obj_set_style_bg_opa(btn, 0, LV_PART_ITEMS);
     lv_obj_set_style_shadow_width(btn, 0, LV_PART_ITEMS);
     lv_obj_set_style_text_color(btn, lv_color_hex(0xff0000),LV_PART_ITEMS);
     lv_obj_add_event_cb(ta, event_cb_msgbox, LV_EVENT_VALUE_CHANGED,NULL);
     lv_obj_add_event_cb(ta_password, event_cb_msgbox, LV_EVENT_VALUE_CHANGED,NULL);
     lv_obj_add_event_cb(msgbox, event_cb_msgbox, LV_EVENT_PRESSED,NULL);
}

十四、线条部件

14.1 创建线条部件

lv_obj_t* line = lv_line_create(lv_scr_act());
//设置线条坐标点
static lv_point_t  line_points[] = { {15, 5}, {25, 20}, {5, 20}, {15, 5} };
//线条部件、线条坐标点、4个坐标
lv_line_set_points(line, line_points, 4);

14.2 设置线条样式

//设置线条宽度，宽度为8
lv_obj_set_style_line_width(line, 8, LV_PART_MAIN); 
//设置圆角
lv_obj_set_style_line_rounded(line, true, LV_PART_MAIN);
//设置y轴反转
lv_line_set_y_invert(line, true);

十五、窗口部件

十六、平铺视图部件

十七、滚轮部件

十八、滑块部件

十九、图片按钮部件

负里55
关注
  • 21
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
最新micropython lvgl固件
09-06
总有人跟我要lvgl的固件，索性传了吧 仅限带psram，不带psram的强烈不建议玩lvgl各种爆内存 固件时间2022.9.6 用m5 core2 亲测可用
LVGL学习-对齐
Jack Yi的博客
05-12 1万+
1、algin lvgl中，对象之间的对齐大的分为两种，一种内部对齐，一种外部对齐。各种对齐方式如下图。 2.对齐函数 2.1 lv_obj_align() 该函为与父对象内部对齐。 lv_obj_t *parent = lv_obj_create(lv_scr_act()); lv_obj_set_size(parent,100,100); lv_obj_set_style_bg_color(parent,lv_palette_main(LV_PALETTE_BLUE),0);
LVGL入门 常用的几个命令（个人笔记）
qq_44810226的博客
10-27 2834
前言：学习LVGL的过程中，常常知道有这个命令，也知道大概怎么用。但总想不起来命令叫什么,在整个库中找也显得麻烦,搞得每次写程序还要翻之前的Demo 所以在这里将学习过程中用到的命令 存放在这里，方便再使用的时候方便的找到命令名字。
LVGL系列（四）概述 之 位置、尺寸和布局
热门推荐
Timer的博客
09-22 1万+
“本文大部分内容来自LVGL官方文档，手翻版，如有错误欢迎指正。” 系列文章目录 一、LVGL系列（一）一文了解LVGL的学习路线轻松了解LVGL的全部 二、LVGL系列（二）之一 LVGL必读介绍 为什么要学习LVGL LVGL系列（二）之二 LVGL常见问题解答 整理自官方文档 二、LVGL系列（三）LVGL仿真环境的搭建（WIN下） 2.1VS下搭建LVGL仿真环境 2.1如何在仿真环境下运行自己的代码 三、LVGL系列（三） ...
LVGL (4) 对齐
StephenZhou
05-05 2385
参考对齐 LVGL 可以指定对象的对齐方式，以及参考的对齐，比如： 参照父对象对齐； lv_obj_set_align(obj, LV_ALIGN_...); 参照父对象对齐后，在设置坐标位置； lv_obj_align(obj, LV_ALIGN_..., x, y); 参照另一个对象(无父子关系)对齐后，设置坐标位置； lv_obj_align_to(obj_to_align, obj_referece, LV_ALIGN_..., x, y); 对齐的类型 ...
LVGL基本控件介绍
damon:月影星魔
08-18 1984
lvgl基本控件的使用和效果图
LVGL中文输入法代码
01-17
LVGL中文输入法代码
LVGL-CodeBlocks工程
10-22
配套文章【01】【01】LVGL-CodeBlock模拟器安装 | LVGL工程下载 | PC端模拟LVGL步骤。地址：http://t.csdnimg.cn/pj1mA
synwit swm341 lvgl
12-10
synwit swm341 lvgl
LVGL8.1.pdf
09-18
LVGL V8对比V7变化了很多,这里是新版的学习手册
【LVGL(3)】设置对象大小、位置、盒子模型、状态
知寒
06-12 1万+
【LVGL(3)】设置对象大小、位置、盒子模型、状态
LVGL学习笔记11 - 按钮矩阵Button Matrix
pq的博客
01-02 5768
按钮矩阵是多个按钮的组合，例如直接绘制一个九宫格按键。按钮矩阵的按钮是实时绘制的，所以占用的内存会比较小。通过lv_btnmatrix_create函数创建按钮矩阵对象。
LVGL——滚轮部件
最新发布
weixin_63780683的博客
12-13 531
【代码】LVGL——滚轮部件。
lvgl lv_obj_align_to函数
MyLovelyJay的博客
10-10 634
lvgl lv_obj_align_to函数
ESP32开发路程LVGL篇（四）——常用函数介绍，屏幕、标签
weixin_45926435的博客
06-29 3309
本文使用的LVGL版本为7.x。介绍了常用的API 并给出了相应解释
lvgl-标签学习篇(四)
weixin_41080308的博客
01-10 2511
通过本篇文章对lvgl的标签控件有了进一步了解
LVGL库入门 02 - 布局
LearnLHC的博客
11-02 1695
一般情况下 flex-grow 和带 wrap 的 flex-flow 是冲突的，也就是说所有设置了 flex-grow 的控件都会在同一行布局，但它们的宽度可能变得很窄。调整一个控件的位置（或者使用类似的函数单独调整一个方向的坐标），将它放在相对父容器左上角的合适位置。这种对齐的方式对于控件不多的情况下来说是足够了，但是有些时候需要对很多并列的控件布局（例如，一个计算机界面的所有按钮）。按钮在创建时还可以指定按钮的图标，图标的本质就是 Unicode 中的特殊符号，在。如果一个控件被设置了冒泡事件标志。
LVGL的学习
JasonKyro的博客
12-08 99
该LVGL基于LVGL的8.2版本开关的控件Demo。
lvgl table部件
09-06
LVGL的table部件是用来创建和管理表格的部件。可以通过以下步骤来使用和配置LVGL的table部件： 1. 创建表格部件：使用`lv_table_create(parent)`函数创建一个表格部件，并指定其父对象。 2. 设置行数和列数：使用`lv_table_set_row_cnt(table, count)`和`lv_table_set_col_cnt(table, count)`函数设置表格的行数和列数。可以使用`lv_table_set_col_width(table, col, width)`函数设置每列的宽度。 3. 设置单元格内容：使用`lv_table_set_cell_value(table, row, col, content)`函数设置指定行和列的单元格的内容。可以使用`lv_table_set_cell_value_fmt(table, row, col, format, ...)`函数以格式化的方式设置单元格的内容。 总结： LVGL的table部件可以用来创建和管理表格，可以设置行数、列数、单元格内容等。它可以轻松地创建和展示表格数据。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [嵌入式GUI LVGL『Table表格控件』介绍](https://blog.csdn.net/XiaoXiaoPengBo/article/details/114077640)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [第四节 LVGL部件使用](https://blog.csdn.net/picassocao/article/details/129102598)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值