UIToolkit示例

最新推荐文章于 2025-09-19 17:03:23 发布

原创

最新推荐文章于 2025-09-19 17:03:23 发布 · 1.1k 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#unity #游戏引擎

参考 https://docs.unity3d.com/Manual/UIE-uxml-examples.html

实现纯图片按钮

    .image-button {
   
   
        background-color: rgba(0, 0, 0, 0);
        -unity-background-image-tint-color: rgb(200, 200, 200);
        border-left-width: 0;
        border-right-width: 0;
        border-top-width: 0;
        border-bottom-width: 0;
    }

    .image-button:hover:enabled {
   
   
        -unity-background-image-tint-color: rgb(255, 255, 255);
    }

    .image-button:hover:active:enabled {
   
   
        -unity-background-image-tint-color:  #888888;
    }

列表设置元素间距

设置 ListView 的 fixItemHeight=50
创建列表元素时，列表元素会自动设置高为50，添加一个子元素，设置height=40，则剩下的10做为间距

接下来就是把鼠标悬停、选中效果从列表元素转移到子元素上

创建列表元素时，给子元素添加 item-back 样式，或直接在UIBuilder中添加

在界面中引用如下样式文件，就2个作用，清除原本的列表元素样式，设置子元素样式

    .unity-list-view__item {
       
       
        background-color: rgba(0, 0, 0, 0);
    }

    .unity-list-view__item:hover {
       
       
        background-color: rgba(0, 0, 0, 0);
    }

    .unity-list-view__item:checked {
       
       
        background-color: rgba(0, 0, 0, 0);
    }

    .unity-list-view__item:checked .item-back {
       
       
        border-left-color: rgba(12, 122, 237, 255);
        border-right-color: rgba(12