使用ZYNQ芯片和LVGL框架实现用户高刷新UI设计系列教程(第十一讲)

这一期讲解lvgl中下拉框的基础使用,下拉列表允许用户从选项列表中选择一个值,下拉列表的选项表默认是关闭的,其中的选项可以是单个值或预定义文本。 当单击下拉列表后,其将创建一个列表,用户可以从中选择一个选项。 当用户选择了一个值后,该列表将被删除,下次点击会再重新生成。总而言之,下拉框控件是由按键与列表组成的控件。

使用GUI_Guider软件在工具栏将下拉框拖拽到界面中,以下是下拉框的默认样式:

在右侧的属性列表中,下拉框分为三个模块分别是main主模块、selected选择模块、list列表模块、scrollbar滚轮模块。

以下图片是main主模块的使用,可以分别配置控件的主颜色、字体颜色以及边框等设置。

以下图片是selected选择模块的使用,主要用来设置点击下拉框后,选中条的属性设置,分别有选中的边框粗细以及颜色的设置。

以下指的是列表的属性设置具体有列表背景颜色、边框大小以及字体设置,最后的高度指的是列表展开的长度设置。

以下是scrollbar滚轮模块的使用,主要用来设置右侧滚动条的颜色以及粗细。

以下是下拉框的相关生成代码:

//Write codes screen_1_ddlist_1

ui->screen_1_ddlist_1 = lv_dropdown_create(ui->screen_1);

//设置列表元素

lv_dropdown_set_options(ui->screen_1_ddlist_1, "list1\nlist2\nlist3");

//设置列表位置以及大小

lv_obj_set_pos(ui->screen_1_ddlist_1, 144, 187);

lv_obj_set_size(ui->screen_1_ddlist_1, 168, 31);

//Write style for screen_1_ddlist_1, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.

//设置文本颜色

lv_obj_set_style_text_color(ui->screen_1_ddlist_1, lv_color_hex(0xffffff), LV_PART_MAIN|LV_STATE_DEFAULT);

//设置文本字体

lv_obj_set_style_text_font(ui->screen_1_ddlist_1, &lv_font_SourceHanSerifSC_Regular_12, LV_PART_MAIN|LV_STATE_DEFAULT);

//设置文本透明度

lv_obj_set_style_text_opa(ui->screen_1_ddlist_1, 255, LV_PART_MAIN|LV_STATE_DEFAULT);

//设置边框宽度

lv_obj_set_style_border_width(ui->screen_1_ddlist_1, 1, LV_PART_MAIN|LV_STATE_DEFAULT);

//设置边框透明度

lv_obj_set_style_border_opa(ui->screen_1_ddlist_1, 255, LV_PART_MAIN|LV_STATE_DEFAULT);

//设置边框颜色

lv_obj_set_style_border_color(ui->screen_1_ddlist_1, lv_color_hex(0xe1e6ee), LV_PART_MAIN|LV_STATE_DEFAULT);

//设置边框类型

lv_obj_set_style_border_side(ui->screen_1_ddlist_1, LV_BORDER_SIDE_FULL, LV_PART_MAIN|LV_STATE_DEFAULT);

//设置边框内边距

lv_obj_set_style_pad_top(ui->screen_1_ddlist_1, 8, LV_PART_MAIN|LV_STATE_DEFAULT);

lv_obj_set_style_pad_left(ui->screen_1_ddlist_1, 6, LV_PART_MAIN|LV_STATE_DEFAULT);

lv_obj_set_style_pad_right(ui->screen_1_ddlist_1, 6, LV_PART_MAIN|LV_STATE_DEFAULT);

//设置边框圆角半径

lv_obj_set_style_radius(ui->screen_1_ddlist_1, 4, LV_PART_MAIN|LV_STATE_DEFAULT);

//设置背景透明度

lv_obj_set_style_bg_opa(ui->screen_1_ddlist_1, 255, LV_PART_MAIN|LV_STATE_DEFAULT);

//设置背景颜色

lv_obj_set_style_bg_color(ui->screen_1_ddlist_1, lv_color_hex(0x000000), LV_PART_MAIN|LV_STATE_DEFAULT);

//设置背景渐变方向

lv_obj_set_style_bg_grad_dir(ui->screen_1_ddlist_1, LV_GRAD_DIR_NONE, LV_PART_MAIN|LV_STATE_DEFAULT);

//设置阴影宽度

lv_obj_set_style_shadow_width(ui->screen_1_ddlist_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);

复制代码
//Write style state: LV_STATE_CHECKED for &style_screen_1_ddlist_1_extra_list_selected_checked
static lv_style_t style_screen_1_ddlist_1_extra_list_selected_checked;
ui_init_style(&style_screen_1_ddlist_1_extra_list_selected_checked);

//设置边框宽度

lv_style_set_border_width(&style_screen_1_ddlist_1_extra_list_selected_checked, 1);

复制代码
//设置边框透明度

lv_style_set_border_opa(&style_screen_1_ddlist_1_extra_list_selected_checked, 255);

//设置边框颜色

lv_style_set_border_color(&style_screen_1_ddlist_1_extra_list_selected_checked, lv_color_hex(0xe1e6ee));

//设置边框类型

lv_style_set_border_side(&style_screen_1_ddlist_1_extra_list_selected_checked, LV_BORDER_SIDE_FULL);

//设置边框圆角半径

lv_style_set_radius(&style_screen_1_ddlist_1_extra_list_selected_checked, 3);

//设置背景透明度

lv_style_set_bg_opa(&style_screen_1_ddlist_1_extra_list_selected_checked, 255);

//设置背景颜色

lv_style_set_bg_color(&style_screen_1_ddlist_1_extra_list_selected_checked, lv_color_hex(0x00a1b5));

//设置背景渐变方向

lv_style_set_bg_grad_dir(&style_screen_1_ddlist_1_extra_list_selected_checked, LV_GRAD_DIR_NONE);

//将样式应用于下拉列表的选中项

lv_obj_add_style(lv_dropdown_get_list(ui->screen_1_ddlist_1), &style_screen_1_ddlist_1_extra_list_selected_checked, LV_PART_SELECTED|LV_STATE_CHECKED);

复制代码
//Write style state: LV_STATE_DEFAULT for &style_screen_1_ddlist_1_extra_list_main_default
static lv_style_t style_screen_1_ddlist_1_extra_list_main_default;
ui_init_style(&style_screen_1_ddlist_1_extra_list_main_default);
//设置最大高度

lv_style_set_max_height(&style_screen_1_ddlist_1_extra_list_main_default, 90);

//设置文本颜色

lv_style_set_text_color(&style_screen_1_ddlist_1_extra_list_main_default, lv_color_hex(0x0D3055));

//设置字体类型

lv_style_set_text_font(&style_screen_1_ddlist_1_extra_list_main_default, &lv_font_montserratMedium_12);

//设置文本透明度

lv_style_set_text_opa(&style_screen_1_ddlist_1_extra_list_main_default, 255);

//设置边框宽度

lv_style_set_border_width(&style_screen_1_ddlist_1_extra_list_main_default, 1);

//设置边框透明度

lv_style_set_border_opa(&style_screen_1_ddlist_1_extra_list_main_default, 255);

//设置边框颜色

lv_style_set_border_color(&style_screen_1_ddlist_1_extra_list_main_default, lv_color_hex(0xe1e6ee));

//设置边框类型

lv_style_set_border_side(&style_screen_1_ddlist_1_extra_list_main_default, LV_BORDER_SIDE_FULL);

//设置圆角半径

lv_style_set_radius(&style_screen_1_ddlist_1_extra_list_main_default, 3);

//设置背景透明度

lv_style_set_bg_opa(&style_screen_1_ddlist_1_extra_list_main_default, 255);

//设置背景颜色

lv_style_set_bg_color(&style_screen_1_ddlist_1_extra_list_main_default, lv_color_hex(0xffffff));

//设置背景渐变色方向

lv_style_set_bg_grad_dir(&style_screen_1_ddlist_1_extra_list_main_default, LV_GRAD_DIR_NONE);

//将样式应用于下拉列表的主部分

lv_obj_add_style(lv_dropdown_get_list(ui->screen_1_ddlist_1), &style_screen_1_ddlist_1_extra_list_main_default, LV_PART_MAIN|LV_STATE_DEFAULT);

复制代码
//Write style state: LV_STATE_DEFAULT for &style_screen_1_ddlist_1_extra_list_scrollbar_default
static lv_style_t style_screen_1_ddlist_1_extra_list_scrollbar_default;
ui_init_style(&style_screen_1_ddlist_1_extra_list_scrollbar_default);
//设置圆角半径

lv_style_set_radius(&style_screen_1_ddlist_1_extra_list_scrollbar_default, 3);

//设置背景透明度

lv_style_set_bg_opa(&style_screen_1_ddlist_1_extra_list_scrollbar_default, 255);

//设置背景颜色

lv_style_set_bg_color(&style_screen_1_ddlist_1_extra_list_scrollbar_default, lv_color_hex(0x00ff00));

复制代码
//设置渐变色方向	lv_style_set_bg_grad_dir(&style_screen_1_ddlist_1_extra_list_scrollbar_default, LV_GRAD_DIR_NONE);

//将样式应用到滚动条

lv_obj_add_style(lv_dropdown_get_list(ui->screen_1_ddlist_1), &style_screen_1_ddlist_1_extra_list_scrollbar_default, LV_PART_SCROLLBAR|LV_STATE_DEFAULT);

下一期讲解下拉框的回调以及信号。

本文章由威三学社出品

对课程感兴趣可以私信联系

相关推荐
Hare_bai35 分钟前
WPF的基础控件:布局控件(StackPanel & DockPanel)
ui·c#·wpf·交互·xaml·visual studio
benben0441 小时前
Photoshop使用钢笔绘制图形
ui·photoshop
Hare_bai5 小时前
WPF的交互核心:命令系统(ICommand)
ui·c#·wpf·交互·xaml
keke106 小时前
WPF【11_11】WPF实战-重构与美化(配置Material UI框架)-示例
ui·重构·wpf
向宇it16 小时前
【unity游戏开发——编辑器扩展】EditorApplication公共类处理编辑器生命周期事件、播放模式控制以及各种编辑器状态查询
开发语言·ui·unity·编辑器·游戏引擎
向宇it16 小时前
【unity游戏开发——编辑器扩展】AssetDatabase公共类在编辑器环境中管理和操作项目中的资源
游戏·ui·unity·编辑器·游戏引擎
benben04418 小时前
Unity3D仿星露谷物语开发55之保存游戏到文件
游戏·ui·unity·游戏引擎
Hare_bai1 天前
WPF的UI交互基石:数据绑定基础
ui·c#·wpf·交互·xaml
keke101 天前
WPF【11_10】WPF实战-重构与美化(配置Material UI框架)
ui·重构·wpf
kooboo china.1 天前
Tailwind CSS 实战,基于 Kooboo 构建 AI 对话框页面(四):语音识别输入功能
前端·css·人工智能·ui·html·交互·语音识别