5+App 中的 View 大概可以分为:
- DOM 也就是 HTML 的内容
- Webview 做为 HTML 的容器
- NView 原生 View
- Map、Video 等原生的控件
- NativeUI 系统原生界面
层级关系
默认的层级关系 DOM < Map = Webview < NView < NativeUI
- DOM 的层级是最低的,因此经常出现某些 HTML 的内容被其它更高层级 View 遮挡的情况。
- Map = Webview 其实不够严谨。原生控件创建后,会与当前 Webview 建立关联关系,可以简单理解为层级一致。
- Webview < NView 是默认的情况,如果 NView 被 append 到 Webview 的话,NView 的层级则会跟随父 Webview。
- NativeUI 系统原生界面的层级是最高的
下面通过一些示例,来验证一下这些层级关系。
示例
这里要先提一句,一个新的 Webview 创建并且显示,默认都会置于栈顶,也就是说会在当前所有 Webview 的最上层。
地图
- NativeUI 弹出框在 Webview 与 Map 上层
- 新的Webview 新开一个 Webview 会遮挡包含 Map 的 Webview。
NView
- NView 默认情况下,层级是高于所有 Webview 的。
- 不append 此时点击“新开窗口”或“返回”,会一直看到 NView 的存在。
- append 此时 NView 作为 Webview 的一部分存在,层级与父 Webview 一致,点击“新开窗口”或“返回”不会再看到 NView 的存在。
- NativeUI 弹出框始终会在 NView 上层
源码
示例的具体代码,见附件。