Unity2019 UIElement 笔记（九）简单练习一_unity uielements propertyfield-CSDN博客

本文链接：https://blog.csdn.net/qq_43500611/article/details/89854008

本文通过创建类似冒险岛1角色属性编辑界面的实例，介绍如何使用Unity2019的UXML和USS。首先，创建C#脚本ActorState和ActorStateEditor，接着设置PropertyField并设计容器布局。通过CSS和XML实现界面样式，包括背景、边框、对齐方式等。最后，制作能力点面板，将UI分为三部分，展示了Unity新UI系统的便利性。尽管对于没有HTML和CSS基础的开发者有一定挑战，但整体体验更佳。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

那么到目前为止，已经学会了如何使用UXML和USS，那么接下来就是实际运用了。
那么在这里我会演示一个最简单的运用，如果有不足之处请大家指出。

目标

我们的目标是做出类似冒险岛1中角色属性的编辑界面，如下图：
在这里插入图片描述
图片是直接从百度图片上找的，那我们就要开始简单的仿制这个UI布局来练习目前学到的内容。

一、创建C#脚本

首先我们创建一个C#脚本，命名为ActorState，并在里面写好我们所需要的属性

using UnityEngine;

[ExecuteInEditMode]
public class ActorState : MonoBehaviour
{
   
   
    public string m_name;
    public string m_career;
    public int m_level;
    public int m_pk;
    public string m_family;
    public int m_maxHP;
    public int m_maxMP;
    public int m_maxEXP;
    public int m_popu;

    public int m_apoint;

    public int m_str;
    public int m_agi;
    public int m_int;
    public int m_luc;
}

然后创建另外一个C#脚本，命名为ActorStateEditor，如下所示：

using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;

[CustomEditor(typeof(ActorState))]
public class ActorStateEditor : Editor
{
   
   
    public override VisualElement CreateInspectorGUI()
    {
   
   
        var visualTree = Resources.Load("actorstate_inspector_uxml") as VisualTreeAsset;
        var uxmlVE = visualTree.CloneTree();
        uxmlVE.styleSheets.Add(AssetDatabase.LoadAssetAtPath<StyleSheet>("Assets/Resources/actorstate_inspector_styles.uss"));
        return uxmlVE;
    }
}

同时创建actorstate_inspector_uxml和actorstate_inspector_styles.uss并放入Resources文件夹中。
那么前期的准备工作就做好了。

二、设置PropertyField

首先在UXML中关联PropertyField

	<editor:PropertyField binding-path="m_name" label="名称"/>

然后在USS中设置PropertyField的样式

PropertyField 
{
   
   
	border-style: solid;
	border-width: 1px 1px 1px 1px;
	border-color: #000;
	border-radius: 6px;
	padding: 2px 0px 0px 0px;
	width:220px;
	background-color: #ACD70C;
}
PropertyField TextField
{
   
   
	width:210px;
	align-self:flex-start;
}
PropertyField Label
{
   
   
	margin: 0px 0px 0px 20px;
	align-self:center;
	align-self:flex-start;
	min-width:50px;
	width:50px;
	font-size: 12;
}

这里unity的背景色貌似还不支持渐变，我就直接用单一颜色了
那么最后的结果如下
在这里插入图片描述
效果。。。还行吧
那么让我们把其他的属性也全部放入
首先添加上IntegerField

PropertyField IntegerField
{
   
   
	width:210px;
	align-self:flex-start;
}

然后写入其他所有的属性

  <editor:PropertyField binding-path="m_name" label="名字" />
  <editor:PropertyField binding-path