﻿## UI Element 简介

在前篇，我们了解到，一个 UIPanel 是可以自动绑定几个 子控件的（Bind）。但是当一个界面结构比较复杂的时候，不可能一个 UIPanel 管理数十个 Bind，这时候就需要对 Bind 进行一些打组操作。我们的 UIElement 就可以登场了。

## UIElement 基本使用

使用方式非常简单，就是将 Bind 中的 标记类型 改成 Element即可,如下所示。

![image.png](https://file.liangxiegame.com/47b78081-62cd-41e2-b96b-47383dc80e04.png)

![image.png](https://file.liangxiegame.com/b9533003-b30b-406e-b14c-4f8f777b1e95.png)

并且要给 生成类名 填写一个名字，这个名字决定生成的类的名字。这里填写了 UIAboutSubPanel。


之后进行 Apply 操作。

![image-20220728141929443](https://file.liangxiegame.com/46876a38-e980-49a8-bbc8-59e74f968f3d.png)



注意这里 Apply 的是 UIBasicPanel。

接着生成代码， 如下:

![image-20220728142010223](https://file.liangxiegame.com/800b53e4-0d6a-43f4-9aa1-ce3815d5fc87.png)


等待编译后，如下所示：



![image-20220728142048854](https://file.liangxiegame.com/3c05a2b9-f815-421b-b0b4-379a0477e401.png)





BtnClose 由 UIAboutSubPanel 管理了

![image-20220728142125763](https://file.liangxiegame.com/956e3e01-32a3-4582-a691-59e2d9e647de.png)

我们看下脚本目录:

![image-20220728142202239](https://file.liangxiegame.com/76847346-79ad-4003-84f7-6111152e457a.png)

目录生成了一个新的文件夹，是以父 Panel （UIBasicPanel）为名的。

打开 UIAboutSubPanel 脚本，代码如下所示:

```csharp
/****************************************************************************
 * 2022.7 LIANGXIEWIN
 ****************************************************************************/

using System;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using QFramework;

namespace QFramework.Example
{
	public partial class SubPanel1 : UIElement
	{
		private void Awake()
		{
		}

		protected override void OnBeforeDestroy()
		{
		}
	}
}
```

再看下 UILoginView.Designer.cs 脚本，如下所示:

```csharp
/****************************************************************************
 * 2022.7 LIANGXIEWIN
 ****************************************************************************/

using UnityEngine;
using UnityEngine.UI;
using QFramework;

namespace QFramework.Example
{
	public partial class SubPanel1
	{
		[SerializeField] public UnityEngine.UI.Button BtnStart2;
		[SerializeField] public UnityEngine.UI.Button BtnStart3;

		public void Clear()
		{
			BtnStart2 = null;
			BtnStart3 = null;
		}

		public override string ComponentName
		{
			get { return "SubPanel1";}
		}
	}
}
```

结构与之前的 UIBasicPanel 非常相似。

接下来，就可以写一些与子模块相关的逻辑了，关于 UIElement 的基本使用就介绍到这里。

本文由 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>



