大家好，我最近一直在使用 Unity 的 UI Toolkit，经常遇到令人沮丧的限制，尤其是缺乏 native 的 gap 属性和绘制倾斜/扭曲形状的困难。为了解决这个问题，我创建了 Playsmart UI Toolkit Extensions，这是一个开源库，添加了这些布局工具和自定义组件到你的项目中。

仓库链接：github.com/Drwuu/playsmart-unity-uitoolkit-extensions

OpenUPM 链接：openupm.com/packages/com.playsmart.uitoolkit-extensions/（或通过 Git URL 安装）

关键特性

1. （模拟 Flexbox Gap）

Unity USS 没有 native 支持 gap。如果你写入它，你会得到未知属性警告。这元素读取一个自定义 --gap 属性，并动态处理布局间距。

• Flex-Direction Aware：自动检测父容器的方向（Row、Column、RowReverse、ColumnReverse）并应用正确的边距。
• Display-Aware Spacing：如果子元素有 display: none（例如过滤列表项），间距管理器会忽略它并重置边距，以避免双重间距或空白边距块。
• Clean Margins：自动清除最后一个可见子元素的间距，以防止布局偏移错误。

2. & （倾斜容器和按钮）

标准 CSS transform: skewX 倾斜子元素，需要在标签上写入反倾斜的hack以保持它们的直立状态。

• 直立内部：组件使用 MeshGenerationContext 绘制一个倾斜的向量背景，同时保持所有文本和子元素的直立状态和清晰度。
• 倾斜点击测试：覆盖 ContainsPoint 方法，使用三角函数进行边界检查。点击仅在鼠标位于倾斜形状内部时才会注册，匹配正负角度的可视几何形状。
• 清晰的边界：包含形状在布局盒的边界内，以防止视觉溢出和剪裁在父元素中。

快速示例

使用 Gap 在 UXML 和 USS 中

xml

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:ps="Playsmart.UIToolkit">
  <ps:Gap class="flex-row-container">
    <ui:VisualElement class="box" />
    <ui:VisualElement class="box" />
    <ui:VisualElement class="box" />
  </ps:Gap>
</ui:UXML>

css

.flex-row-container {
  flex-direction: row;
  --gap: 20; /* 动态间距子元素 20px */
}

使用 SkewButton 在 UXML 和 USS 中

xml

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:ps="Playsmart.UIToolkit">
  <ps:SkewButton name="ConfirmButton" text="START GAME" class="slanted-btn"/>
</ui:UXML>

css

.slanted-btn {
  width: 150px;
  height: 45px;
  --skew-angle: 15; /* 倾斜背景 15 度 */
  --skew-fill-color: #1e1e32;
  --skew-stroke-color: #00f0ff;
  --skew-stroke-width: 1.5;
}

开放贡献！

我的目标是不断扩展这个包成为一个完整的 UI Toolkit 缺失布局和样式扩展库。如果你解决了其他 USS/UXML 问题或想添加组件，请自由打开一个问题或提交一个 Pull Request！

https://preview.redd.it/pggiqbjz3tdh1.png?width=1917&format=png&auto=webp&s=5dd609bc20ee5ac66f22e41a1b5ad28f31de322a