文章目录

• 什么是对话框
• 对话框的分类
• • 无模式对话框
  • 模式对话框
• lvgl上的解决方案
• • lvgl无模式对话框效果
  • lvgl模式对话框效果
  • • 实现原理
    • lvgl无模式对话框示例代码
    • lvgl模式对话框代码
    • • 改进
      • 实现源码
  • 更近一步的改进

什么是对话框

模态对话框（Modal Dialogue Box，又叫做模式对话框），是指在用户想要对对话框以外的应用程序进行操作时，必须首先对该对话框进行响应。如单击【确定】或【取消】按钮等将该对话框关闭。一般来说，对话框分为模态对话框和非模态对话框两种。

二者的区别在于当对话框打开时，是否允许用户进行其他对象的操作。

对话框的分类

对话框分类无模式对话框和模式对话框。

无模式对话框

这是一种非强制回应的对话框，用于向用户请求非必须资料。即可以不理会这种对话框或不向其提供任何信息而继续进行当前工作，所以窗口均可打开并处于活动状态或是获得焦点（人机交互热点）。一类无模式对话框表现为工具栏，比如设置用于文字颜色的设置。查找/替换对话框可算是无模式对话框，也可以设计为工具栏。¹

模式对话框

这种对话框强制要求用户回应，否则用户不能再继续进行操作，直到与该对话框完成交互。这种对话框设计用于程序运行必须停下来，直到从用户获得一些额外的信息，然后才可以继续进行的操作，或可能只想确认使用者想要进行一项具有潜在危险性的操作。有模式对话框一般被视为坏的设计方案，因为以一种用户不喜欢看到方式出现，或是被习惯不去注意对话框提示的用户忽略，导致无法避免危险操作。¹

有模式对话框一般分为系统级和应用程序级。系统级对话框出现时，用户在完成与这个对话框交互之前不能进行其它操作，比如关机对话框、Windows Vista 中的 UAC。应用程序级的则只对它的母程序有所限制，但可能在允许运行多个实际的不同软件中有不同的表现：只限定其中的一个程序窗口使之无法操作或全部限定。¹

lvgl上的解决方案

两种对话框模式简单而言就是：

• 无模式对话框：停留在屏幕上，随时可用，并且允许进行其他操作
• 模式对话框：要求用户在继续程序之前做出响应

在lvgl上怎么实现这种效果呢？
非模式对话框很简单，直接让窗口弹出即可，用户可操作弹出的对话框也可以继续其他操作。
lvgl上有两个特殊的图层，通过这两个图层我们可以实现模式对话框的效果。

本文只讲解lvgl中模式对话框的实现过程。

lvgl无模式对话框效果

lvgl模式对话框效果

实现原理

lvgl的具有图层(layer)的概念，默认规则是最后创建的在最上层，一般我们都是使用在 lv_scr_act 层上面创建各种控件(widgets)，每个控件其实就相当于一个个小小的图层展示在屏幕上。

在 lv_scr_act 之上还有另外两个层 layer_top 和 layer_sys，这是两个特殊的层。两者在显示器的所有屏幕上都是可见的和通用的。但是，它们不会在多个物理显示器之间共享。 layer_top 始终位于默认屏幕 (lv_scr_act()) 的顶部，而 layer_sys 位于 layer_top 的顶部。

用户可以使用 layer_top 来创建一些随处可见的内容。例如，一个菜单栏，一个弹出窗口等。如果启用了click属性，那么layer_top将吸收所有用户点击并充当模态。

layer_sys 在 LVGL 中也用于类似的目的。例如，它将鼠标光标放在所有图层上方以确保它始终可见。

layer_sys > layer_top > lv_scr_act

使用lvgl实现模式对话框的关键点就是利用 layer_sys 和 layer_top 的特点。也就是说创建对话框的时候在 layer_sys 和 layer_top 之上创建即可。

示例中使用到了 layer_top 实现模式对话框效果。下面是示例源码。

lvgl无模式对话框示例代码

看注释是阅读理解源码的好方法，下面给出的代码可直接在lvgl开发环境下运行。

// 代码将在不久之后更新展示

lvgl模式对话框代码

看注释是阅读理解源码的好方法，下面给出的代码可直接在lvgl开发环境下运行。

// 代码将在不久之后更新展示

改进

上面的代码实现的效果是标准的模式对话框的效果，我们必须完成日历的设置才能退出对话框，如果是不小心点错了或者不想现在就设置，那么应该是点击空白处就可以退出当前对话框，实现效果是这样的：

实现源码

看注释是阅读理解源码的好方法，下面给出的代码可直接在lvgl开发环境下运行。

// 代码将在不久之后更新展示

更近一步的改进

这里的改进是对于对话框之外的改进，不知道读者发现没有，我们布局编写的代码非常低级糟糕的，其实我们不用这么麻烦，lvgl 8.x 中我们可以使用两种布局：

• Flex（弹性布局）
• Grid（网格布局）

通过这两种布局我们可以很方便的管理我们的ui布局。这部分的内容超出了本文的范围，感兴趣的读者可以关注阅读我的下一篇文章：
//TODO

---

1. wiki百科“对话框” ↩︎ ↩︎ ↩︎

标签：layer,对话框,top,用户,模式,图层,lvgl
来源： https://blog.csdn.net/qq_35181236/article/details/120392214