LVGL 妙用 LV_OBJ_FLAG_FLOATING

点击删除的时候需要一个确定和取消的提示界面,按钮的大小和删除的按钮一致。

static constexpr int kAlarmActionBtnWidth = 100;

static constexpr int kAlarmActionBtnHeight = 60;

static void ui_alarm_close_confirm_dialog(void)

{

if (ui_alarm_confirm_dialog != NULL) {

int alarm_id = static_cast<int>(reinterpret_cast<intptr_t>(lv_obj_get_user_data(btn)));

AlarmManager::GetInstance().RemoveAlarm(alarm_id);

ui_alarm_show_delete_confirm(alarm_id);

}

lv_obj_t * delete_btn = lv_button_create(delete_container);

lv_obj_set_width(delete_btn, 100);

lv_obj_set_height(delete_btn, 60);

ui_alarm_close_confirm_dialog();

lv_obj_clean(ui_Alarm_body);

| ^~~~~~~~~~ D:/ESP32P4/HC01/xiaozhi_code/xiaozhi-esp32-2.2.6/main/alarm_ui.cc: In function 'void ui_Alarm_refresh_from_manager()': D:/ESP32P4/HC01/xiaozhi_code/xiaozhi-esp32-2.2.6/main/alarm_ui.cc:311:85: warning: bitwise operation between different enumeration types '<unnamed enum>' and '<unnamed enum>' is deprecated -Wdeprecated-enum-enum-conversion 311 | lv_obj_set_style_text_align(empty_label, LV_TEXT_ALIGN_CENTER, LV_PART_MAIN | LV_STATE_DEFAULT); | ~~~~~~~~~~~~~^~~~~~~~~~~~~~~~~~

lv_obj_t * delete_btn = ui_alarm_create_action_button(delete_container, "删除", ui_event_Alarm_delete, alarm.id);

ui_alarm_create_action_button(delete_container, "删除", ui_event_Alarm_delete, alarm.id);

已加上删除确认弹窗,交互如下:

  1. 点击「删除」→ 弹出半透明遮罩 + 居中对话框,提示「确定删除此闹钟?」
  2. 确定(100×60)→ 执行 RemoveAlarm() 并关闭弹窗,列表自动刷新
  3. 取消(100×60)→ 仅关闭弹窗,不删除

细节:

  • 确定/取消/删除三个按钮统一用 ui_alarm_create_action_button(),尺寸均为 100×60 px
  • 按钮文字与备注一样,都用 lcd_display_get_theme_text_font()
  • 弹窗挂在 ui_Alarm 顶层,不会随列表刷新被清掉;刷新列表前会先关闭未确认的弹窗

重新编译烧录后即可测试。

我点击删除,弹窗没有显示出来

排查删除弹窗未显示的原因,先看弹窗创建逻辑和 ui_Alarm 的布局。

/** Close delete-confirm overlay if open. */

void ui_Alarm_close_confirm_dialog(void);

static void ui_alarm_close_confirm_dialog(void)

extern "C" void ui_Alarm_close_confirm_dialog(void)

{

int alarm_id = ui_alarm_pending_delete_id;

ui_alarm_close_confirm_dialog();

ui_Alarm_close_confirm_dialog();

if (alarm_id > 0) {

ui_alarm_close_confirm_dialog();

ui_Alarm_close_confirm_dialog();

ui_alarm_pending_delete_id = alarm_id;

ui_alarm_close_confirm_dialog();

ui_Alarm_close_confirm_dialog();

lv_obj_clean(ui_Alarm_body);

}

if(event_code == LV_EVENT_SCREEN_UNLOADED) {

ui_Alarm_close_confirm_dialog();

}

| ~~~~~~~~~~~~~^~~~~~~~~~~~~~~~~~ D:/ESP32P4/HC01/xiaozhi_code/xiaozhi-esp32-2.2.6/main/alarm_ui.cc: In function 'void ui_Alarm_refresh_from_manager()': D:/ESP32P4/HC01/xiaozhi_code/xiaozhi-esp32-2.2.6/main/alarm_ui.cc:314:85: warning: bitwise operation between different enumeration types '<unnamed enum>' and '<unnamed enum>' is deprecated -Wdeprecated-enum-enum-conversion 314 | lv_obj_set_style_text_align(empty_label, LV_TEXT_ALIGN_CENTER, LV_PART_MAIN | LV_STATE_DEFAULT); | ~~~~~~~~~~~~~^~~~~~~~~~~~~~~~~~

原因: ui_Alarm 是纵向 flex 布局(顶部 10% + 列表 90%)。弹窗作为第三个子控件参与 flex 排布,高度被压成 0,等于在屏幕外,所以看不到。

修复:

  1. 给弹窗加上 LV_OBJ_FLAG_FLOATING,脱离 flex 布局
  2. 全屏尺寸 + 居中 + lv_obj_move_foreground() 盖在最上层
  3. 离开闹钟页(SCREEN_UNLOADED)时自动关闭弹窗

请重新编译烧录后再点「删除」,应能看到半透明遮罩和「确定删除此闹钟?」对话框。

说明: 请 monitor 使用 xiaozhi-esp32-2.2.6/build/xiaozhi.elf,不要用 mipilcd.elf,否则可能还在跑旧固件

相关推荐
laowangpython12 天前
Photoshop 2025 下载安装全攻略
其他·ui·photoshop
风华圆舞12 天前
Flutter + 鸿蒙 Intents Kit:页面直达能力的完整接入方案
flutter·ui·华为·harmonyos
鲲穹AI超级员工12 天前
多款实用配色工具汇总,适配设计、UI 创作等多元场景
ui·色彩设计
UXbot12 天前
帮助企业低门槛开展AI应用开发的平台推荐
前端·低代码·ui·交互·产品经理·原型模式·web app
烂白菜12 天前
智码美形:华为云码道 × UI-UX-Pro-Max 高品质界面智能生成实践
ui·华为云·ux
像风一样的男人@13 天前
python --实现代理服务器
git·ui
风华圆舞13 天前
鸿蒙 Flutter 页面怎么感知防窥状态并调整 UI 可见性
flutter·ui·harmonyos
UXbot13 天前
如何选择适合公司项目的UI设计工具?企业选型指南
前端·低代码·ui·团队开发·原型模式·设计规范·web app
UXbot13 天前
原型设计工具如何帮助新人快速进入产品行业?
前端·低代码·ui·交互·团队开发·原型模式·web app
烈焰晴天13 天前
Codex 桌面端如何链接Figma MCP 服务器拿到 Figma设计稿精准尺寸等结构化数据 来精准还原UI
服务器·ui·figma