[开发者心得] UI的层级问题

[复制链接]
701 |2
空伊伊 发表于 2023-12-27 15:37:19 | 显示全部楼层 |阅读模式
本帖最后由 空伊伊 于 2023-12-27 15:44 编辑

UI的层级问题

(UI的层级,简单理解可以分为,“Root”之间的层级 和 “控件”之间的层级)


UI文件的构成:
在介绍如何控制UI层级之前,需要先了解UI文件的构成以及与UIScript的关系。
在我们新建一个UI文件的时候,会默认在对象树中添加"Root"和"RootCanvas"这两个对象,它俩是不能被删除的,因为想要显示UI必须有这两个对象。
image.png
这两个对象与UIScript的关系如下:
sp20231227_143538_995.png

UI是如何与UIScript关联起来的?
关联方式一:给UI挂载脚本
打开UI文件后,可以在Root的属性面板上找到一个“TS脚本”的属性,只需要将对应的UIScript脚本挂载上去即可。
随后将UI添加到对象管理器上,UIScript脚本就能伴随游戏启动,自动关联上UI。

关联方式二:mw.createUI()
这个接口是动态创建UI的基础接口,第一个参数需要传入UI文件的相对路径,第二个参数需要传入想要绑定的UIScript脚本的类名。
这个接口会实例化一个UIScript脚本,并自动关联上UI。

关联结果:
关联成功后,就能通过UIScript获取到UuiWidgetBase,从而通过 findChildByPath 来获取到各个控件进行UI操作
这里有一个注意点:UIScript中的uiWidgetBase只能在初始化的时候与UI进行绑定,不支持动态修改。

显示UI的接口
想要直观感受到UI层级的变化,前提是需要将UI显示出来,这里简单介绍一下UIService提供的两个显示UI的接口。

接口一:UIService.show()
这个接口传入的参数是一个类名,也就是UIScript的名称。这个接口实际上是做了两个操作,首先是通过 mw.createUI() 创建了一个UIScript实例,然后再将UI显示到屏幕上。

接口二:UIService.showUI()
这个接口的第一个参数,需要传入一个已经创建好的UIScript实例;第二个参数则是需要传入 UI层级的枚举


层级变更的具体表现
介绍完前置知识点之后,现在我们再回过头来看层级问题。
前面说了,UI的层级,简单理解可以分为,“Root”之间的层级 和 “控件”之间的层级,反映到代码中,也就是uiWidgetBase的zOrder属性 和 各类控件的zOrder属性。我们只需要修改这个zOrder,就可以变更UI的层级。具体的变更表现可以观看下面这个视频:

总结一下:
"Root"的层级,也就是uiWidgetBase的zOrder属性,控制着整个UI与其它UI之间的层级关系。
“控件”的层级,也就是各类控件的zOrder属性,控制着控件在UI内部的层级关系。

演示Demo:
UI层级.rar (94.17 KB, 下载次数: 55)
回复

使用道具 举报

天启 发表于 2024-6-6 22:02:18 | 显示全部楼层
那么代码方面如何设置root层级和控件层级呢
回复

使用道具 举报

空伊伊楼主 发表于 2024-6-7 10:13:02 | 显示全部楼层
天启 发表于 2024-6-6 22:02
那么代码方面如何设置root层级和控件层级呢

就是zOrder,你可以下载我提供的Demo看看
回复

使用道具 举报

热门版块
快速回复 返回顶部 返回列表