如何快速学习新版UI?
要想使用UI Toolkit,需要使用UnityEditor2022。
查看菜单windows/UI Toolkit/Samples,里面带着一些样例。这些样例主要学习UXML的写法。
如何快速创建一个使用新版UI的EditorWindow?
右键create,选择UIElements/EditorWindow,就会弹窗提示创建三个文件。
UXML概览
在生成的脚本中,可以发现UXML文件是动态加载并渲染的。
public class one : EditorWindow
{
[MenuItem("Window/UIElements/one")]
public static void ShowExample()
{
one wnd = GetWindow<one>();
wnd.titleContent = new GUIContent("one");
}
public void CreateGUI()
{
// Each editor window contains a root VisualElement object
VisualElement root = rootVisualElement;
// VisualElements objects can contain other VisualElement following a tree hierarchy.
VisualElement label = new Label("Hello World! From C#");
root.Add(label);
// Import UXML
var visualTree = AssetDatabase.LoadAssetAtPath<VisualTreeAsset>("Assets/Scenes/新版UI/Editor/one.uxml");
VisualElement labelFromUXML = visualTree.CloneTree();
root.Add(labelFromUXML);
// A stylesheet can be added to a VisualElement.
// The style will be applied to the VisualElement and all of its children.
var styleSheet = AssetDatabase.LoadAssetAtPath<StyleSheet>("Assets/Scenes/新版UI/Editor/one.uss");
VisualElement labelWithStyle = new Label("Hello World! With Style");
labelWithStyle.styleSheets.Add(styleSheet);
root.Add(labelWithStyle);
}
}
如何在runtime UI中使用UXML?
使用UXML有两种方式:在editor UI中、在runtime UI中。
在editor中,使用EditorWindow的rootVisualElement,添加UXML资源。
在runtime中,添加UIDocument类型的元素,然后为UI Document类型的元素设置UXML文件。
label+text
var label = new Label("App ID");
var input = new TextField("App ID");
input.value = Gs.appId;
input.RegisterValueChangedCallback(e => { Gs.appId = e.newValue; });
root.Add(label);
root.Add(input);
Label就可以省略了,可以简写为
var input = new TextField("App ID");
input.value = Gs.appId;
input.RegisterValueChangedCallback(e => { Gs.appId = e.newValue; });
root.Add(input);