LVGL部件4

一.列表部件

1.知识概览

LVGL部件4_第1张图片

LVGL部件4_第2张图片

2.函数接口

1.lv_list_add_btn

lv_list_add_btn
LittlevGL(LVGL)图形库中的一个函数,用于向列表(list)对象中添加一个按钮(button)。

函数原型为:lv_obj_t * lv_list_add_btn(lv_obj_t * list, const void * img_src, const char * txt)

这个函数用于在列表对象中添加一个按钮,可以包含一个图像和一个文本。

list 参数是指向列表对象的指针,即要将按钮添加到的列表。

img_src 参数是一个指向图像数据的指针,用于指定按钮上显示的图像。如果不需显示图像,可以将此参数设置为 NULL

txt 参数是一个表示按钮上显示的文本的字符串。

lv_list_add_btn 函数会在列表对象中创建一个新的按钮,并将其添加到列表的末尾。按钮的图像和文本将根据提供的参数进行显示。

列表(list)是 LittlevGL
中的一种容器对象,用于显示一系列有序的项目。通过向列表中添加按钮,可以创建一个可点击的项目列表,以便用户与列表中的选项进行交互。

lv_list_add_btn 函数的第二个参数中,可以使用一些宏定义来指定按钮上显示的图像。以下是一些常见的宏定义示例:

  1. LV_SYMBOL_OK: 显示一个“√”符号,表示确认或通过。
  2. LV_SYMBOL_CLOSE: 显示一个“X”符号,表示关闭或取消。
  3. LV_SYMBOL_EDIT: 显示一个“✎”符号,表示编辑。
  4. LV_SYMBOL_DELETE: 显示一个“”符号,表示删除。
  5. LV_SYMBOL_REFRESH: 显示一个“⟳”符号,表示刷新或重新加载。
  6. LV_SYMBOL_WIFI: 显示一个 Wi-Fi 信号图标。

这些宏定义可以在使用 lv_list_add_btn 函数时,通过传递相应的宏定义来显示对应的图像。

除了这些宏定义外,还可以使用图像资源对象(lv_img)作为第二个参数,以显示自定义的图像。

2.lv_obj_add_state

lv_obj_add_state 是 LittlevGL(LVGL)图形库中的一个函数,用于向对象添加状态。

函数原型为:void lv_obj_add_state(lv_obj_t * obj, lv_state_t state)

这个函数用于将指定的状态添加到对象的状态集中。

obj 参数是一个指向对象的指针,表示要添加状态的对象。

state 参数是一个表示要添加的状态的枚举值(lv_state_t 类型)。LVGL 中定义了许多状态,例如 LV_STATE_DEFAULTLV_STATE_PRESSEDLV_STATE_CHECKED 等,开发者可以根据需要选择合适的状态。

通过调用 lv_obj_add_state 函数,可以将指定的状态添加到对象的状态集中。在绘制对象时,LVGL 会根据对象的状态选择正确的外观样式。

例如,可以通过将 LV_STATE_PRESSED 状态添加到按钮对象来模拟按钮的按下效果,或通过将 LV_STATE_CHECKED 状态添加到复选框对象来表示它被选中。

3.代码实例

lv_obj_t *list;
static void event_cb(lv_event_t *e)
{
    lv_obj_t *target=lv_event_get_target(e);   //获取触发源
    printf("%s\n",lv_list_get_btn_text(list,target));//获取文本并且打印
    lv_obj_add_state(target,LV_STATE_FOCUS_KEY);   //添加聚焦状态
}

void my_lvgl(void)
{
    list =lv_list_create(lv_scr_act());  //创建一个列表部件
    lv_obj_set_size(list,200,200);    //设置大小
    lv_obj_center(list);   //居中对齐
    lv_list_add_text(list,"Settings");  //添加文本
    lv_obj_t  *btn1=lv_list_add_btn(list,LV_SYMBOL_WIFI,"WIFI");     // 添加wifi图标
    lv_obj_t  *btn2=lv_list_add_btn(list,LV_SYMBOL_AUDIO,"music");   //添加音乐图标
    lv_obj_t  *btn3=lv_list_add_btn(list,LV_SYMBOL_VIDEO,"WIFI");    //添加视频图标
    lv_list_add_text(list,"Settings");  //添加文本


    lv_obj_add_event_cb(btn1,event_cb,LV_EVENT_CLICKED,NULL);   //添加事件,点击释放时触发
}

二.下拉列表

1.知识概览

LVGL部件4_第3张图片

LVGL部件4_第4张图片

LVGL部件4_第5张图片

2.函数接口

1.lv_dropdown_set_dir

lv_dropdown_set_dir 是 LittlevGL(LVGL)图形库中的一个函数,用于设置下拉菜单(dropdown)的打开方向。

函数原型为:void lv_dropdown_set_dir(lv_obj_t * dropdown, lv_dropdown_dir_t dir)

这个函数用于设置下拉菜单的打开方向,决定了下拉菜单的弹出位置。

dropdown 参数是一个指向下拉菜单对象的指针,表示要设置打开方向的下拉菜单。

dir 参数是一个表示下拉菜单的打开方向的枚举值(lv_dropdown_dir_t 类型)。LVGL 中定义了几个方向,包括 LV_DROPDOWN_DIR_UP(向上打开)、LV_DROPDOWN_DIR_DOWN(向下打开)、LV_DROPDOWN_DIR_LEFT(向左打开)和 LV_DROPDOWN_DIR_RIGHT(向右打开)。

通过调用 lv_dropdown_set_dir 函数,可以将指定的打开方向应用到下拉菜单,并决定其弹出的位置。这可以在创建下拉菜单之后或根据需要时进行设置。

例如,将 LV_DROPDOWN_DIR_DOWN 方向应用到下拉菜单,使其向下打开,显示在按钮的下方。

2.lv_dropdown_add_option

lv_dropdown_add_option 是 LVGL(LittlevGL)中用于向下拉菜单添加选项的函数。该函数的原型如下:

lv_obj_t * lv_dropdown_add_option(lv_obj_t * dropdown, const char * option_str)
  • dropdown 是指向下拉菜单对象的指针。
  • option_str 是要添加的选项的文本字符串。

以下是示例代码,展示如何使用 lv_dropdown_add_option 函数向下拉菜单中添加选项:

// 创建下拉菜单
lv_obj_t *dropdown = lv_dropdown_create(lv_scr_act(), NULL);

// 添加选项
lv_dropdown_add_option(dropdown, "Option 1");
lv_dropdown_add_option(dropdown, "Option 2");
lv_dropdown_add_option(dropdown, "Option 3");

3.代码实例

static void event_cb(lv_event_t *e)
{
    lv_obj_t *target=lv_event_get_target(e);   //获取触发源
    printf("%d\n",lv_dropdown_get_selected(target));   //获取选项
    char buf[10]={0};
    lv_dropdown_get_selected_str(target,buf,sizeof(buf));  //获取文本
    printf("%s\n",buf);

}

void my_lvgl(void)
{
    lv_obj_t *dd=lv_dropdown_create(lv_scr_act());   //创建下拉部件
    lv_dropdown_set_options(dd,"a\nb\nc\nd");        //动态设置内容
    //lv_dropdown_set_options_static(dd,"a\nb\nc\nd");    //静态设置内容
    lv_dropdown_add_option(dd,"e",4);   //添加索引
    lv_dropdown_set_selected(dd,1);      //社会当前索引

    lv_obj_add_event_cb(dd,event_cb,LV_EVENT_VALUE_CHANGED,NULL);  //添加事件当选项发生变化触发


    lv_dropdown_set_dir(dd,LV_DIR_RIGHT);         //设置列表展开方向
    lv_dropdown_set_symbol(dd,LV_SYMBOL_RIGHT);   //设置图标

}

你可能感兴趣的:(LVGL,lvgl,单片机,gui)