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

下一期讲解下拉框的回调以及信号。
本文章由威三学社出品
对课程感兴趣可以私信联系

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

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

相关文章

【神经网络与深度学习】VAE 在解码前进行重参数化

【神经网络与深度学习】VAE 在解码前进行重参数化

在 VAE 中，解码之前进行重参数化主要有以下几个重要原因： 可微分性 在深度学习里，模型是通过反向传播算法来学习的，而这需要计算梯度。若直接从潜在变量的分布 (q_{\theta}(z|x))（由编码器输出的均值 (\mu) 和方差 (…
阅读更多...
BBDM学习笔记

BBDM学习笔记

1. configs 1.1 LBBDM: Latent BBDM [readme]
阅读更多...
mysql主从复制搭建，并基于‌Keepalived + VIP实现高可用

mysql主从复制搭建，并基于‌Keepalived + VIP实现高可用

以下是基于 ‌Keepalived VIP‌ 实现 MySQL 主从复制高可用的详细步骤，涵盖主从复制搭建与故障自动切换： 一、MySQL 主从复制搭建（基础步骤回顾） 1. ‌主库（Master）配置‌ 修改配置文件‌ /etc/my.cnf&…
阅读更多...
CD36.【C++ Dev】STL库的string的使用 (下)

CD36.【C++ Dev】STL库的string的使用 (下)

目录 1.reserve函数(不是reverse) 代码示例 2.resize 代码示例 3.reserve和resize的区别 4.shrink_to_fit 代码示例 5.与C语言的配合的接口函数: c_str 代码示例 6.rfind 知识回顾:find函数 rfind 代码示例 练习题: 字符串最后一个单词的长度 代码 提交结果 ​…
阅读更多...
STM32的网络天气时钟项目

STM32的网络天气时钟项目

一、项目概述与硬件架构 1.1 核心功能 本智能天气时钟系统集成了实时天气获取、网络时间同步、环境监测和低功耗管理四大核心功能： 网络数据获取： 通过ESP8266 WiFi模块连接心知天气API（每小时更新）获取北京标准时间服务器的时…
阅读更多...
FPGA DDR4多通道管理控制器设计

FPGA DDR4多通道管理控制器设计

DDR4控制器一般采用自带的MIG控制器，用户控制主要是基于MIG IP核进行设计 实际工程项目中可能只挂载了一组DDR，但是用户数据可能有很多种，用户通过给每种数据划分特定地址进行存储，如何实现灵活管理成为设计的关键 为了方便后端数…
阅读更多...
低代码 x AI，解锁数智化应用的创新引擎

低代码 x AI，解锁数智化应用的创新引擎

AI 智能体开发指南 随着全球信息化浪潮的持续推进，数字化、智能化转型已成为企业发展的必经之路。在这个变革的时代，企业面临着前所未有的挑战与机遇。一方面，市场环境瞬息万变，企业需要快速响应并调整业务模式；另一方…
阅读更多...
【Spring Boot 注解】@Configuration与@AutoConfiguration

【Spring Boot 注解】@Configuration与@AutoConfiguration

文章目录 Configuration与AutoConfiguration一、Configuration二、AutoConfiguration Configuration与AutoConfiguration 一、Configuration 这是最常用的 Spring 注解之一，表示当前类是一个 配置类，可以定义 Bean 方法，等效于传统的 XML 配…
阅读更多...
arXiv论文 MALOnt: An Ontology for Malware Threat Intelligence

arXiv论文 MALOnt: An Ontology for Malware Threat Intelligence

文章讲恶意软件威胁情报本体。 作者信息 作者是老美的，单位是伦斯勒理工学院，文章是2020年的预印本，不知道后来发表在哪里（没搜到，或许作者懒得投稿，也可能是改了标题）。 中心思想 介绍开源…
阅读更多...
【存储管理—动态不等长存储资源分配算法】

【存储管理—动态不等长存储资源分配算法】

文章目录 一、实验目的二、实验内容与设计思想实验内容设计思路 三、实验代码实现四、总结 一、实验目的 理解动态异长存储分区资源管理，掌握所需数据结构和管理程序，了解各种存储分配算法的优点和缺点。 二、实验内容与设计思想 实验内容 1.分析uni…
阅读更多...
快速上手 Docker：从入门到安装的简易指南（Mac、Windows、Ubuntu）

快速上手 Docker：从入门到安装的简易指南（Mac、Windows、Ubuntu）

PS：笔者在五一刚回来一直搞Docker部署AI项目，发现从开发环境迁移到生成环境时，Docker非常好用。但真的有一定上手难度，推荐读者多自己尝试踩踩坑。 本篇幅有限，使用与修改另起篇幅。 一、Docker是什么 #1. Docker是什…
阅读更多...
LabVIEW高冲击加速度校准系统

LabVIEW高冲击加速度校准系统

在国防科技领域，高 g 值加速度传感器广泛应用于先进兵器研制，如深侵彻系统、精确打击弹药及钻地弹药等。其性能指标直接影响研究结果的准确性与可靠性，因此对该传感器进行定期校准意义重大。高冲击加速度校准系统具备多方面功能，适…
阅读更多...
FPGA 纯逻辑NVME raid0 IP核

FPGA 纯逻辑NVME raid0 IP核

系统采用XCZU19EG搭载4个三星990 PRO SSD 单盘读写不低于3GB/s 4盘总带宽不低于12GB/s
阅读更多...
GStreamer开发笔记（三）：测试gstreamer/v4l2+sdl2/v4l2+QtOpengl打摄像头延迟和内存

GStreamer开发笔记（三）：测试gstreamer/v4l2+sdl2/v4l2+QtOpengl打摄像头延迟和内存

若该文为原创文章，转载请注明原文出处 本文章博客地址：https://blog.csdn.net/qq21497936/article/details/147714800 长沙红胖子Qt（长沙创微智科）博文大全：开发技术集合（包含Qt实用技术、树莓派、三维、O…
阅读更多...
CATIA高效工作指南——零件建模篇（二）

CATIA高效工作指南——零件建模篇（二）

一、PowerCopy特征复用技术 1.1 智能特征封装 通过​​几何图形集(Geometrical Set)​​构建参数化特征组，将关联的草图、曲面、实体等元素进行逻辑封装。操作流程如下： 创建新几何图形集并完成特征建模激活PowerCopy命令，选择目标几何集定…
阅读更多...
CentOS 7 安装OpenJDK 17 JRE

CentOS 7 安装OpenJDK 17 JRE

CentOS 7 自带的java 版本为：java version "1.8.0_311"， 有些软件的运行需要更高的java版本。CentOS 7 自带的默认仓库里 没有 OpenJDK 17，但是 Adoptium 项目（前身 AdoptOpenJDK）提供了稳定的 OpenJDK 17 版…
阅读更多...
【c++】 我的世界

【c++】 我的世界

太久没更新小游戏了 给个赞和收藏吧&#xff0c;求求了 要游戏的请私聊我 #include <iostream> #include <vector>// 定义世界大小 const int WORLD_WIDTH 20; const int WORLD_HEIGHT 10;// 定义方块类型 enum BlockType {AIR,GRASS,DIRT,STONE };// 定义世界…
阅读更多...
angular的cdk组件库

angular的cdk组件库

目录 一、虚拟滚动 一、虚拟滚动 <!-- itemSize相当于每个项目的高度为30px --><!-- 需要给虚拟滚动设置宽高&#xff0c;否则无法正常显示 --> <cdk-virtual-scroll-viewport [itemSize]"40" class"view_scroll"><div class"m…
阅读更多...
视频编解码学习三之显示器

视频编解码学习三之显示器

整理自&#xff1a;显示器_百度百科&#xff0c;触摸屏_百度百科,百度安全验证 分为阴极射线管显示器&#xff08;CRT&#xff09;&#xff0c;等离子显示器PDP&#xff0c;液晶显示器LCD 液晶显示器的组成。一般来说&#xff0c;液晶显示器由以下几个部分组成&#xff1a; […
阅读更多...
尚硅谷-硅谷甄选项目记录

尚硅谷-硅谷甄选项目记录

一、Vue3 1 基础配置 1.1 路径别名 vite.config.ts import { defineConfig } from vite import vue from vitejs/plugin-vue// 引入path&#xff0c;node提供的模块&#xff0c;可以获取文件或文件夹的路径 import path from pathexport default defineConfig({plugins: […
阅读更多...
最新文章

Copyright @ 2022~2023