UI Toolkit系统学习

最新推荐文章于 2024-07-15 21:52:20 发布
最新推荐文章于 2024-07-15 21:52:20 发布
阅读量1k 收藏 5
点赞数 17
分类专栏： 杂七杂八的小知识 文章标签： ui 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Petrichorzncu/article/details/137150429
版权

UI Toolkit
此文章用于学习UnityUI系统，手头的项目做完会来完善
官方文档
Unity上方菜单栏点击Window->UI Toolkit->Samples可以看UI Toolkit中的很多样例

使用 UI Toolkit 和 UI Builder 制作物品编辑器

在文件夹中右键->Create->UI Toolkit->Editor Window
出现以下窗口
在这里插入图片描述
输入名字创建窗口
文件夹中出现三个文件
在这里插入图片描述
从这步开始就能点击Unity上方菜单栏召唤自己写的Editor Window了

点击ItemEditor进入UIBuilder，用里面的工具创建需要的UI面板
在这里插入图片描述

创建 ListView 中的 ItemTemplate

再创建一个UIDocument，作为ItemList中每一个物体显示的模板
在这里插入图片描述

生成 ListView 列表

实现ItemTemplate读取数据库中物品数据并将其呈现在ListView上的方法

public class ItemEditor : EditorWindow
{
    private ItemDataList_SO dataBase;
    private List<ItemDetails> itemList = new List<ItemDetails>();
    private VisualTreeAsset itemRowTemplate;
    private ListView itemListView;
    
    [MenuItem("Editor/ItemEditor")]
    public static void ShowExample()
    {
        ItemEditor wnd = GetWindow<ItemEditor>();
        wnd.titleContent = new GUIContent("ItemEditor");
    }

    public void CreateGUI()
    {
       
        VisualElement root = rootVisualElement;
        var visualTree = AssetDatabase.LoadAssetAtPath<VisualTreeAsset>("Assets/Editor/UIBuilder/ItemEditor.uxml");
        VisualElement labelFromUXML = visualTree.Instantiate();
        root.Add(labelFromUXML);
        
        //拿到模板数据
        itemRowTemplate =
            AssetDatabase.LoadAssetAtPath<VisualTreeAsset>("Assets/Editor/UIBuilder/ItemRowTemplate.uxml");
        //变量赋值
        itemListView = root.Q<VisualElement>("ItemList").Q<ListView>("ListView");
        LoadDataBase();
        GenerateListView();
    }
    /// <summary>
    /// 从数据库中加载文件
    /// </summary>
    private void LoadDataBase()
    {
        var dataArray=AssetDatabase.FindAssets("ItemDataList_SO");
        if (dataArray.Length > 1)
        {
            var path = AssetDatabase.GUIDToAssetPath(dataArray[0]);//找到文件中对应的路径
            dataBase = AssetDatabase.LoadAssetAtPath(path, typeof(ItemDataList_SO)) as ItemDataList_SO;
        }

        itemList = dataBase.itemDetailsList;
        //如果不标记则无法保存数据
        EditorUtility.SetDirty(dataBase);
    }

    private void GenerateListView()
    {
        Func<VisualElement> makeItem = () => itemRowTemplate.CloneTree();//创建
        Action<VisualElement, int> bindItem = (e, i) =>
        {//在ItemTemplate上绑定数据
            if (i < itemList.Count)
            {
                if (itemList[i].itemIcon != null)
                {
                    e.Q<VisualElement>("Icon").style.backgroundImage = itemList[i].itemIcon.texture;
                   
                }
                e.Q<Label>("Name").text = itemList[i] == null ? "NO ITEM" : itemList[i].itemName;
            }
        };
        //将ItemTemplate呈现在ListView里
        itemListView.fixedItemHeight = 60;
        itemListView.itemsSource = itemList;
        itemListView.makeItem = makeItem;
        itemListView.bindItem = bindItem;
    }
}

makeItem会在每次添加新物品时调用——在数据绘制到窗口时会根据数据的数目逐一增加一个Item的时候
bindItem每个窗口显示的具体内容
itemsSource对应itemList里面的每一个数据

绑定 Editor Window 中的参数变量，实现 ListView 添加删除同步信息功能

实现在右侧面板中显示物体对应的信息

public class ItemEditor : EditorWindow
{
    private ItemDataList_SO dataBase;
    private List<ItemDetails> itemList = new List<ItemDetails>();
    private VisualTreeAsset itemRowTemplate;
    private ScrollView itemDetailsSection;
    private ItemDetails activeItem;

    //默认预览图片
    private Sprite defaultIcon;

    private VisualElement iconPreview;
    //获得VisualElement
    private ListView itemListView;

    [MenuItem("M STUDIO/ItemEditor")]
    public static void ShowExample()
    {
        ItemEditor wnd = GetWindow<ItemEditor>();
        wnd.titleContent = new GUIContent("ItemEditor");
    }

    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/Editor/UI Builder/ItemEditor.uxml");
        VisualElement labelFromUXML = visualTree.Instantiate();
        root.Add(labelFromUXML);

        //拿到模版数据
        itemRowTemplate = AssetDatabase.LoadAssetAtPath<VisualTreeAsset>("Assets/Editor/UI Builder/ItemRowTemplate.uxml");

        //拿默认Icon图片
        defaultIcon = AssetDatabase.LoadAssetAtPath<Sprite>("Assets/M Studio/Art/Items/Icons/icon_M.png");

        //变量赋值
        itemListView = root.Q<VisualElement>("ItemList").Q<ListView>("ListView");
        itemDetailsSection = root.Q<ScrollView>("ItemDetails");
        iconPreview = itemDetailsSection.Q<VisualElement>("Icon");


        //获得按键
        root.Q<Button>("AddButton").clicked += OnAddItemClicked;
        root.Q<Button>("DeleteButton").clicked += OnDeleteClicked;
        //加载数据
        LoadDataBase();

        //生成ListView
        GenerateListView();
    }

    #region 按键事件
    private void OnDeleteClicked()
    {
        itemList.Remove(activeItem);
        itemListView.Rebuild();
        itemDetailsSection.visible = false;
    }

    private void OnAddItemClicked()
    {
        ItemDetails newItem = new ItemDetails();
        newItem.itemName = "NEW ITEM";
        newItem.itemID = 1001 + itemList.Count;
        itemList.Add(newItem);
        itemListView.Rebuild();
    }
    #endregion

    private void LoadDataBase()
    {
        var dataArray = AssetDatabase.FindAssets("ItemDataList_SO");
        //var dataArray = AssetDatabase.FindAssets("t:ItemDataList_SO");  //不同版本写法不一样
        //if (dataArray.Length >= 1)    //不同版本写法不同
        if (dataArray.Length > 1)
        {
            var path = AssetDatabase.GUIDToAssetPath(dataArray[0]);
            dataBase = AssetDatabase.LoadAssetAtPath(path, typeof(ItemDataList_SO)) as ItemDataList_SO;
        }

        itemList = dataBase.itemDetailsList;
        //如果不标记则无法保存数据
        EditorUtility.SetDirty(dataBase);
        // Debug.Log(itemList[0].itemID);
    }

    private void GenerateListView()
    {
        Func<VisualElement> makeItem = () => itemRowTemplate.CloneTree();

        Action<VisualElement, int> bindItem = (e, i) =>
        {
            if (i < itemList.Count)
            {
                if (itemList[i].itemIcon != null)
                    e.Q<VisualElement>("Icon").style.backgroundImage = itemList[i].itemIcon.texture;
                e.Q<Label>("Name").text = itemList[i] == null ? "NO ITEM" : itemList[i].itemName;
            }
        };

        itemListView.fixedItemHeight = 50;  //根据需要高度调整数值
        itemListView.itemsSource = itemList;
        itemListView.makeItem = makeItem;
        itemListView.bindItem = bindItem;

        itemListView.onSelectionChange += OnListSelectionChange;

        //右侧信息面板不可见
        itemDetailsSection.visible = false;
    }

    private void OnListSelectionChange(IEnumerable<object> selectedItem)
    {
        activeItem = (ItemDetails)selectedItem.First();
        GetItemDetails();
        itemDetailsSection.visible = true;
    }

    private void GetItemDetails()
    {
        itemDetailsSection.MarkDirtyRepaint();

        itemDetailsSection.Q<IntegerField>("ItemID").value = activeItem.itemID;
        itemDetailsSection.Q<IntegerField>("ItemID").RegisterValueChangedCallback(evt =>
        {
            activeItem.itemID = evt.newValue;
        });

        itemDetailsSection.Q<TextField>("ItemName").value = activeItem.itemName;
        itemDetailsSection.Q<TextField>("ItemName").RegisterValueChangedCallback(evt =>
        {
            activeItem.itemName = evt.newValue;
            itemListView.Rebuild();
        });

        iconPreview.style.backgroundImage = activeItem.itemIcon == null ? defaultIcon.texture : activeItem.itemIcon.texture;
        itemDetailsSection.Q<ObjectField>("ItemIcon").value = activeItem.itemIcon;
        itemDetailsSection.Q<ObjectField>("ItemIcon").RegisterValueChangedCallback(evt =>
        {
            Sprite newIcon = evt.newValue as Sprite;
            activeItem.itemIcon = newIcon;

            iconPreview.style.backgroundImage = newIcon == null ? defaultIcon.texture : newIcon.texture;
            itemListView.Rebuild();
        });

        //其他所有变量的绑定
        itemDetailsSection.Q<ObjectField>("ItemSprite").value = activeItem.itemOnWorldSprite;
        itemDetailsSection.Q<ObjectField>("ItemSprite").RegisterValueChangedCallback(evt =>
        {
            activeItem.itemOnWorldSprite = (Sprite)evt.newValue;
        });

        itemDetailsSection.Q<EnumField>("ItemType").Init(activeItem.itemType);
        itemDetailsSection.Q<EnumField>("ItemType").value = activeItem.itemType;
        itemDetailsSection.Q<EnumField>("ItemType").RegisterValueChangedCallback(evt =>
        {
            activeItem.itemType = (ItemType)evt.newValue;
        });

        itemDetailsSection.Q<TextField>("Description").value = activeItem.itemDescription;
        itemDetailsSection.Q<TextField>("Description").RegisterValueChangedCallback(evt =>
        {
            activeItem.itemDescription = evt.newValue;
        });

        itemDetailsSection.Q<IntegerField>("ItemUseRadius").value = activeItem.itemUseRadius;
        itemDetailsSection.Q<IntegerField>("ItemUseRadius").RegisterValueChangedCallback(evt =>
        {
            activeItem.itemUseRadius = evt.newValue;
        });

        itemDetailsSection.Q<Toggle>("CanPickedup").value = activeItem.canPickedup;
        itemDetailsSection.Q<Toggle>("CanPickedup").RegisterValueChangedCallback(evt =>
        {
            activeItem.canPickedup = evt.newValue;
        });

        itemDetailsSection.Q<Toggle>("CanDropped").value = activeItem.canDropped;
        itemDetailsSection.Q<Toggle>("CanDropped").RegisterValueChangedCallback(evt =>
        {
            activeItem.canDropped = evt.newValue;
        });

        itemDetailsSection.Q<Toggle>("CanCarried").value = activeItem.canCarried;
        itemDetailsSection.Q<Toggle>("CanCarried").RegisterValueChangedCallback(evt =>
        {
            activeItem.canCarried = evt.newValue;
        });

        itemDetailsSection.Q<IntegerField>("Price").value = activeItem.itemPrice;
        itemDetailsSection.Q<IntegerField>("Price").RegisterValueChangedCallback(evt =>
        {
            activeItem.itemPrice = evt.newValue;
        });

        itemDetailsSection.Q<Slider>("SellPercentage").value = activeItem.sellPercentage;
        itemDetailsSection.Q<Slider>("SellPercentage").RegisterValueChangedCallback(evt =>
        {
            activeItem.sellPercentage = evt.newValue;
        });
    }
}
Petrichorzncu
关注
  • 17
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用Unity UI Toolkit开发一个用于展示指定数据的工具
keeeeer的博客
03-30 912
用UI Toolkit开发的一个Editor Window，功能较为全面。实现上主要使用了MultiColumnListView类和事件系统。
ilixi1.0.0 - UI toolkit
06-14
**ilixi1.0.0 - UI Toolkit** ilixi1.0.0是一款专为嵌入式Linux系统设计的轻量级C++用户界面工具包，它基于DirectFB技术构建。这款UI工具包旨在为资源有限的设备提供高效、易用且功能丰富的图形用户界面解决方案。 ...
UIToolkit学习笔记
weixin_44979122的博客
10-12 381
UIToolkit学习笔记 学习资料: https://blog.csdn.net/qq_43500611/category_8901054.html 初步封装了uiframework框架, 工程地址:https://github.com/cameIz/com.uitoolkit.uiframework
ui design资源
包su的专栏
04-18 317
0.前言*** design pattern并不是你的全部 当你忽略了fragment后，你会发现，你已忽略了actionbar， 和，一些好的ui design pattern 你不觉得，你应该好好的利用4.0之后的风格吗 之下，将会列出一些资源，关于ui pattern（也许，不仅仅是） 该文章，将会持续更新   1.正文***   一些文章（入口去发现）： http...
UI Tool Kit 使用
Cco丶
06-17 2422
Unity UIToolKit
19个免费的UI界面设计工具及资源
雪梦科技
04-02 2904
原文：http://www.oschina.net/news/16602/19-free-ui-design-tools-toolkits-and-resources-for-designers 开源中国社区刚发布了一篇《21个免费的UI界面设计工具、资源及网站》，介绍了免费的Web UI、移动UI、线框工具等。作为该文章的续篇，本文再介绍19个免费UI设计工具及资源，目的同样是帮助你通
UIToolkit下一代UI系统
UWA—简单优化，优化简单！
03-02 7240
1. UIToolkit运行时――下一代UI系统 UIToolkit的前身是UIElement，发布于Unity 2018。起初它用于开发Editor编辑面板中的UI，自Unity 2019、Unity 2020起正式支持运行时UI并且更名为UIToolkit，它以Package包的形式存在。自Unity 2021.2起，UIToolkit被官方内置在Unity中和UGUI的地位一致，UIToolkit作为下一代UI系统，设计之初目标就很明确，就是替换掉现有的UGUI系统。 现有的UGUI系统从2014
Unity UI Toolkit学习笔记-Visual Tree
qq_26318597的博客
09-02 788
UIToolkit Visual Tree学习笔记
UIToolkit U3D GUI
04-16
因此，学习和掌握UIToolkit对于保持Unity3D开发的前沿性至关重要。 总结来说，UIToolkit U3D GUI是Unity3D UI开发的全新里程碑，它以组件化、数据驱动和高性能为特点，为开发者带来了更强大的UI设计和交互实现能力...
prime31-UIToolkit
04-14
3. **游戏内购买和广告集成**：Prime31-UIToolkit支持内购系统和广告嵌入，使得开发者可以方便地添加虚拟商品购买和广告展示功能，从而实现盈利。 4. **云存档和进度同步**：通过此插件，开发者可以实现跨设备的...
silverlight 图书管理系统UI
12-17
3. System.Windows.Controls.dll与System.Windows.Controls.Toolkit.dll：这是Silverlight的基础控件库，包括了各种UI元素，如按钮、文本框、列表视图等，以及一些扩展控件，如日历、滑块等，用于构建图书管理系统的...
基于安卓的学习系统app
09-09
总的来说，基于安卓的学习系统app开发涉及众多技术点，包括但不限于安卓SDK、Eclipse ADT、UI设计、数据管理、网络通信以及性能优化。对于开发者而言，深入理解和熟练运用这些技术是创建成功学习应用的关键。
UI物体左右匀速运动
u011146831的博客
07-15 153
else。
Vue和Element UI 路由跳转，侧边导航的路由跳转，侧边栏拖拽
爱敲代码的卡拉米的博客
07-12 316
项目中用到了点击侧边栏的跳转，所以记录下来，方便有需要的人用到~是通过重定向定位到登陆页的，然后通过登陆页跳转到主页。首先看布局，因为我的用于页面显示的。
国外UI设计赏析—汽车行业
07-12 194
关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司、银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发。
【PyQt】
江苏学蠡信息科技有限公司是一家国家高新技术企业，与众多高校深入开展产学研合作，有一支以硕博士为主导的研发和服务团队，获得自主知识产权十余项。围绕中国高等教育人工智能及物联网专业发展规划，创新性的推出人工智能类、物联网类、嵌入式类三大学科教学产品与培训服务。
07-11 401
通过QtDesigner创建如下图所示的界面ui，并用UIC工具转成对应的py文件。案例一代码通过线程实现点击按钮向线程传输地址，程序等待20秒后，返回结果。通过QtDesigner创建如下图所示的界面ui。案例二通过线程实现用按钮控制进度条。
【区分vue2和vue3下的element UI Carousel 走马灯组件，分别详细介绍属性，事件，方法如何使用，并举例】
xiejunlan的博客
07-12 969
在 Vue 2 中，我们通常使用 Element UI，而在 Vue 3 中，我们则使用 Element Plus 作为其替代品。对于 Carousel 走马灯组件，这两个库提供了相似的功能，但在 Vue 2 和 Vue 3 的上下文中，它们的属性、事件和方法可能会有所不同。以下将分别介绍 Vue 2 下的 Element UI Carousel 和 Vue 3 下的 Element Plus Carousel 的属性、事件和方法，并给出示例。属性（Props）height: 走马灯的高度。
【Android高级UI】PorterDuffMode颜色混合公式
最新发布
天天向上 Up Up Up (*^▽^*)
07-15 75
PorterDuffMode Formula
ui toolkit
08-31
UI Toolkit是Unity引擎中的一个内置工具，从Unity 2021LTS版本开始被引入。它被设计成成为Unity中主要的UI构建方式，与UGUI相比有一些区别和优势。 要打开UI Toolkit的编辑界面，可以在Unity中打开UI Builder。UI Builder类似于游戏物体的添加和编辑界面，但是专门用于UI的编辑。你可以通过在文件夹中创建一个UI Document文件并打开它来直接进入编辑界面。在UI Builder中，你可以调整画布的大小，设置画布是否自动适应游戏窗口的大小等。 UI Toolkit使用VisualElement作为所有UI控件的基类，它提供了一种统一的方式来创建和管理UI元素。通过使用UI Toolkit，开发者可以更加灵活和高效地构建和设计各种UI界面。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [UI Toolkit（1）](https://blog.csdn.net/tongmeng_yiran/article/details/130034196)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值