当前位置: 首页 > article >正文

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

Gui Guider是配合lvgl开发使用的软件平台,其中内置有30多个控件供开发人员使用,可以创作多个界面以及生成代码,为开发提供方便。
创建工程成功后,通过右侧的界面属性可以调配界面的颜色和透明度,左上角是控件工具栏,具体如下图所示:
在这里插入图片描述
按键
在工具栏中拖拽一个按键到界面画布中去,将btn的名字修改为“按键”,由于该平台缺失文字库,需要调整文件格式为宋体,点击运行才可正常显示。
在样式列表中第一行是关于按键模块的状态设置,我们只设置初始状态即可,下一栏是背景颜色和透明度的设置,再下面是字体的设置,我们选择16号字体与宋体格式,文字对齐方式为居中,最下面俩栏是美化方面的设置,我们可以根据边框背景颜色以及粗细自己自定义,也可点击更多预设样式选择官方提供的三种样式修改使用。
在这里插入图片描述
下图是美化后的效果以及设置:
在这里插入图片描述
就这样关于一个按键的设计就完成了,然后点击右上角的运行,在运行中点击c语言运行,开发者可以在该平台初步看到项目实现的样式与功能。
在这里插入图片描述
在这里插入图片描述
点击代码管理可以看到你设计界面所生成的代码,当使用时只需要将这块代码移植即可。下方是生成的代码:
//创建一个界面
ui->screen = lv_obj_create(NULL);
lv_obj_set_size(ui->screen, 480, 480);
lv_obj_set_scrollbar_mode(ui->screen, LV_SCROLLBAR_MODE_OFF);

//设置界面透明度颜色
lv_obj_set_style_bg_opa(ui->screen, 255, LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_bg_color(ui->screen, lv_color_hex(0xffffff), LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_bg_grad_dir(ui->screen, LV_GRAD_DIR_NONE, LV_PART_MAIN|LV_STATE_DEFAULT);

//创建一个按键

ui->screen_btn_1 = lv_btn_create(ui->screen);
//创建按键上的标签
ui->screen_btn_1_label = lv_label_create(ui->screen_btn_1);
//设置标签文本
lv_label_set_text(ui->screen_btn_1_label, “按键”);
//设置标签文本换行方式
lv_label_set_long_mode(ui->screen_btn_1_label, LV_LABEL_LONG_WRAP);
//对齐标签至按钮中心
lv_obj_align(ui->screen_btn_1_label, LV_ALIGN_CENTER, 0, 0);
//设置按钮内边距
lv_obj_set_style_pad_all(ui->screen_btn_1, 0, LV_STATE_DEFAULT);
//设置标签的宽度为按钮百分比
lv_obj_set_width(ui->screen_btn_1_label, LV_PCT(100));
//设置按钮位置
lv_obj_set_pos(ui->screen_btn_1, 185, 282);
//设置按钮大小
lv_obj_set_size(ui->screen_btn_1, 100, 50);

//设置按键样式
//设置背景透明度
lv_obj_set_style_bg_opa(ui->screen_btn_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
//设置边框宽度
lv_obj_set_style_border_width(ui->screen_btn_1, 2, LV_PART_MAIN|LV_STATE_DEFAULT);
//设置边框透明度
lv_obj_set_style_border_opa(ui->screen_btn_1, 255, LV_PART_MAIN|LV_STATE_DEFAULT);
//设置边框颜色
lv_obj_set_style_border_color(ui->screen_btn_1, lv_color_hex(0x5482a9), LV_PART_MAIN|LV_STATE_DEFAULT);
//设置边框样式
lv_obj_set_style_border_side(ui->screen_btn_1, LV_BORDER_SIDE_FULL, LV_PART_MAIN|LV_STATE_DEFAULT);
//设置圆角半径
lv_obj_set_style_radius(ui->screen_btn_1, 25, LV_PART_MAIN|LV_STATE_DEFAULT);
//设置阴影宽度
lv_obj_set_style_shadow_width(ui->screen_btn_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
//设置文本颜色
lv_obj_set_style_text_color(ui->screen_btn_1, lv_color_hex(0x12548b), LV_PART_MAIN|LV_STATE_DEFAULT);
//设置文本大小样式
lv_obj_set_style_text_font(ui->screen_btn_1, &lv_font_SourceHanSerifSC_Regular_18, LV_PART_MAIN|LV_STATE_DEFAULT);
//设置文本透明度
lv_obj_set_style_text_opa(ui->screen_btn_1, 255, LV_PART_MAIN|LV_STATE_DEFAULT);
//设置文本对齐方式
lv_obj_set_style_text_align(ui->screen_btn_1, LV_TEXT_ALIGN_CENTER, LV_PART_MAIN|LV_STATE_DEFAULT);
具体代码使用请参考,lvgl版本对应的官方手册,下一期讲按键在模拟器上的回调函数如何使用。

使用ZYNQ芯片和LVGL框架实现用户高刷新UI设计系列教程


http://www.kler.cn/a/585235.html

相关文章:

  • 苍穹外卖实战附源码-DAY1
  • 优选算法的匠心之艺:二分查找专题(一)
  • 微前端解决方案之MicroApp
  • 基于YOLO11深度学习的舌苔舌象检测识别与诊断系统【python源码+Pyqt5界面+数据集+训练代码】
  • OpenCV特征提取与深度学习CNN特征提取差异
  • 58.Harmonyos NEXT 图片预览组件架构设计与实现原理
  • 【Idea】 xml 文本粘贴保持原有文本的缩进格式
  • C语言的机器学习
  • C++ STL 深度解析:vector 的全面指南与进阶技巧
  • Java 实现定长报文模拟器(支持配置文件 默认值)
  • 计算机网络TCP/IP四层模型
  • 列表动态列处理
  • 链表与栈的实现及操作详解:从基础到应用
  • GIT日常记录
  • 六十天前端强化训练之第十五天React组件基础案例:创建函数式组件展示用户信息(第15-21天:前端框架(React))
  • ES怎么通过客户端操作和查询/curl操作指令
  • 地下停车场调频广播覆盖:破解地下车库无线广播收听孤岛,技术赋能地下停车场FM调频无线广播覆盖
  • 【python实战】-- 选择解压汇总mode进行数据汇总20250314更新
  • 61.Harmonyos NEXT 图片预览组件之数据模型设计与实现
  • API自动化测试实战:Postman + Newman/Pytest的深度解析