LVGL 中设置 UI 层局部透明,显示下方视频层

LVGL层次

LVGL自上而下分别是layer_sys > layer_top > lv_sreen_active > layer_bottom

即 系统层、顶层、活动屏幕、底层

原理

如果将UI设置为局部透明,显示下方的视频层,不仅仅需要将当前活动屏幕的背景设置为透明,还需要将底层背景也设置为透明。(实测不需要将顶层和系统层设置为透明,当然设置为透明也没问题)

代码

复制代码
lv_obj_set_style_bg_opa(lv_screen_active(), LV_OPA_TRANSP, LV_PART_MAIN)
lv_obj_set_style_bg_opa(lv_layer_bottom(), LV_OPA_TRANSP, LV_PART_MAIN)
lv_display_set_color_format(disp, LV_COLOR_FORMAT_ARGB8888)

这里说一个坑,LVGL中32位的颜色深度除了LV_COLOR_FORMAT_ARGB8888之外还有LV_COLOR_FORMAT_XRGB8888, 后面这个XRGB888像素格式中的X表示没有透明度。

如果之前设置显示器display为了XRGB8888,无法透明掉背景,需要按上述代码最后一句将display设置位ARGB8888格式。

相关推荐
子春一2 小时前
Flutter for OpenHarmony: 从颜色模型到可访问性:一个 Flutter 高对比度 UI 的完整实践
flutter·ui
雨季6664 小时前
Flutter 三端应用实战:OpenHarmony 简易数字累加器开发指南
开发语言·flutter·ui·ecmascript
●VON4 小时前
Flutter for OpenHarmony:基于 SharedPreferences 的本地化笔记应用架构与实现
笔记·学习·flutter·ui·架构·openharmony·von
ujainu6 小时前
Flutter + OpenHarmony实现高保真闹钟 App:从 UI 设计到实时触发机制全解析
flutter·ui
晚霞的不甘6 小时前
Flutter for OpenHarmony《智慧字典》 App 底部导航栏深度解析:构建多页面应用的核心骨架
前端·经验分享·flutter·ui·前端框架·知识图谱
子春一7 小时前
Flutter for OpenHarmony:构建一个交互式 Flutter RGB 颜色选择器,深入解析状态驱动 UI、HEX 转换与无障碍色彩对比
flutter·ui
雨季6667 小时前
Flutter 三端应用实战:OpenHarmony 简易文本首字母提取器开发指南
flutter·ui·dart
集成显卡16 小时前
Lucide Icons:一套现代、轻量且可定制的 SVG 图标库
前端·ui·图标库·lucide
子春一18 小时前
Flutter for OpenHarmony:构建一个高精度 Flutter 计时器:深入解析 Timer、状态同步与 UI 响应式设计
flutter·ui
雨季66618 小时前
构建 OpenHarmony 简易文字行数统计器:用字符串分割实现纯文本结构感知
开发语言·前端·javascript·flutter·ui·dart