﻿## UI Kit 简介

UI Kit 是一套界面管理&快速开发解决方案

UI Kit 的特性如下：

* 界面管理
* 层级管理
* 代码生成及组件自动绑定（底层用的 ViewController)


## UI Kit 基本使用

UI Kit 本身有一套推荐使用的工作流程，而此工作流程的设计是为了使每个界面只负责展示数据和监听用户输入，界面与界面之间互相独立，并且可独立测试。

下面我们将介绍如何制作一个游戏主页（UIBasicPanel）。

首先我们先创建一个场景：TestUIBasicPanel，如下图所示:

![image-20220725171613899](https://file.liangxiegame.com/1b23e2de-9af1-4ce7-b5fd-7f1af8f1688b.png)

在这里大家要注意一下，UI Kit 推荐每个界面创建一个对应的测试场景，要保证每个界面是可以独立测试的。



接着打开 TestUIBasicPanel 如下所示：

![image-20220725171641152](https://file.liangxiegame.com/0f2accd3-1836-4d38-9858-3cc7828dc72f.png)

我们拖出来一个 UIRoot prefab，如下所示:

![image-20220725171556290](https://file.liangxiegame.com/3804bb25-0112-4798-bee8-d1b9bf13f134.png)

这里非常清晰地可以看到 UI Kit 所支持的所有层级。

接着我们在 Design 层级下创建一个 Panel（右击 Design->UI->Panel) ，并命名为 UIBasicPanel，如下所示:

![image-20220725171752004](https://file.liangxiegame.com/6b626de9-223f-4d32-9031-285c1d537c75.png)

这里要说一点，Design 层级，顾名思义就是用来做设计的层级，什么是设计？就是拼界面，这个层级就是专门用来拼界面的，Design 层级会在运行的时候会自动隐藏掉自己以及所有的子节点。

OK，接下来，我们将 UIBasic 制作成 prefab，将其放到 Assets/Art/UIPrefab 目录下，如果没有这个目录就自己手动创建一下。

放入后如下图所示:

![image-20220725172338703](https://file.liangxiegame.com/584225aa-eb8a-4a7d-a44e-32ecd6732aa2.png)

Assets/Art/UIPrefab 这个目录是怎么来的呢？它是 QFramework 约定的专门放置 UI 界面 prefab 的位置。而 Assets/Art 是框架推荐存放资源的位置，当然关于资源的存放位置只是推荐，而不是强制的。

但是 UI 界面的 prefab 必须放在 Assets/Art/UIPrefab 目录下，因为这个部分在代码生成的时候需要。

那么有的童鞋可能会问，Assets/Art/UIPrefab 这个路径可以不可以更改？

当然可以，更改的方式也很简单，就是打开包管理面板(QFramework/Preference ctrl + e)，打开后可以看到如下面板:

![image-20220725172030417](https://file.liangxiegame.com/146ffecf-e9b8-46fc-8e6e-1b95832256fd.png)

详细的设置方式在上边介绍了，这里就不多介绍了。

接下来需要将 UIHomePanel prefab 标记为 AssetBundle，如下图所示:

![image-20220725172438374](https://file.liangxiegame.com/f999ac89-5b91-453f-a865-1dea7045a1d3.png)

标记成功后。

会看到如下结果:

![image-20220725172140857](https://file.liangxiegame.com/3c313f23-2350-4e88-a7b3-88958e9e6219.png)

接着，我们在这里要确保一件事情，就是 Res Kit 需要保证当前环境是模拟环境（Simulation Mode），具体看面板中的如下选项是否是勾上即可。

![image-20220725172213241](https://file.liangxiegame.com/98e4043d-bd1b-4a29-9363-890f9f545b12.png)

确保勾上之后，我们就开始生成代码，具体操作如下所示（右键->@UI-Kit Create UI Code):

![image-20220725172505171](https://file.liangxiegame.com/de51f6ad-fef7-46dd-adee-c286b77511fe.png)

点击之后等待编译，编译结束后，我们看到如下结果:

**脚本生成成功**

![image-20220725172532517](https://file.liangxiegame.com/7f3959f1-66fc-44de-a8b1-97e31383dcdd.png)



**脚本自动挂载了 UIBasicPanel Prefab 上**

![image-20220725172550535](https://file.liangxiegame.com/b386fd53-1f84-4ede-a79c-a20533361fa1.png)

到此，代码生成部分就介绍完了。

接着，我们想办法让这个场景独立运行。

现在，我们直接运行场景，是不会加载任何界面的，如下所示:

![image-20220725172721472](https://file.liangxiegame.com/4ecc5084-4f8b-4ac3-a62b-d4b7a4c9967e.png)

如何让这个场景加载 UIBasicPanel 呢？

很简单，使用 UIPanelTester 如下所示:

![image-20220725172923702](https://file.liangxiegame.com/dd934412-abfd-4d92-9906-3e084a2b761d.png)

按照图中样子设置就好，然后运行场景。
结果如下:

![image-20220725173003435](https://file.liangxiegame.com/71acdc41-14a2-42c3-a9c7-6fef2af9757b.png)

图中成功加载了改界面。

这样，最基本的 UIBasicPanel 测试场景就算搭建完了，同时我们是完全按照 QFramework 推荐的工作流程完成的。

虽然步骤会稍微繁琐一点，但是用一段时间大家就会觉得这是值得的。

OK，接下来我们来介绍控件的自动绑定功能。

## 控件的自动绑定功能

我们在 UIBasicPanel 上添加一些按钮，并在每个按钮上挂上 Bind 脚本，如下所示:

![image-20220725173212119](https://file.liangxiegame.com/9f099faf-d488-491c-bb74-444816c48d6f.png)

接着 Apply UIBasicPanel，如下所示:

![image-20220725173259294](https://file.liangxiegame.com/5782a40b-f683-41a2-9db7-7481853aa6a8.png)

这里要注意，一定要选定 UIBasicPanel 再进行 Apply，千万别选成 UIRoot 了。

Apply 之后，再次生成一次代码，操作如下所示:

![image-20220725172505171](https://file.liangxiegame.com/de51f6ad-fef7-46dd-adee-c286b77511fe.png)

生成之后，结果如下:

![image-20220725191039907](https://file.liangxiegame.com/3f332d24-b7cc-403e-a8d0-e628bf186f9e.png)

接着，我们打开 UIHomePanel.cs 脚本，试着写一些代码:

```csharp
using UnityEngine;
using UnityEngine.UI;
using QFramework;

namespace QFramework.Example
{
	public class UIBasicPanelData : UIPanelData
	{
	}
	public partial class UIBasicPanel : UIPanel
	{
		protected override void OnInit(IUIData uiData = null)
		{
			mData = uiData as UIBasicPanelData ?? new UIBasicPanelData();
			
			BtnStart.onClick.AddListener(() =>
			{
				Debug.Log("开始游戏");
			});
		}
		
		protected override void OnOpen(IUIData uiData = null)
		{
		}
		
		protected override void OnShow()
		{
		}
		
		protected override void OnHide()
		{
		}
		
		protected override void OnClose()
		{
		}
	}
}

```

代码很简单，主要是在 OnInit 的时候注册了 BtnStart 按钮。

接着我们运行场景，接着点击 BtnStart 按钮，得到结果如下:
![image.png](https://file.liangxiegame.com/70f2fbb8-1267-407a-960f-bb019f114a83.png)

这样控件自动绑定功能就介绍完了。



自动绑定的功能与 View Controller + Bind 是使用的是同一套机制。

本文由 QFramework 教程年会员赞助，地址：[https://www.gamepixedu.com/goods/show/55](https://www.gamepixedu.com/goods/show/55)

* QFramework 主页：[qframework.cn](https://qframework.cn)
* QFramework 交流群: 541745166
* QFramework Github 地址: <https://github.com/liangxiegame/qframework>
* QFramework Gitee 地址：<https://gitee.com/liangxiegame/QFramework>