C# Unity新UI工具包进度条

我最近一直在使用新的Unity UI工具包（Unity 2021.1），但注意到UI生成器没有包含进度条的定义。这似乎是游戏的一个标准部分（健康数据等），我震惊地发现游戏中没有内置组件，，我找不到相关指南。我确信我一定是找错地方了，希望有人能给我指出正确的方向

---

我目前的方法是使用滑块组件，并尝试通过自定义USS工作表来设置样式。然而，我注意到新的UI系统与旧的不同，并且无法指定“覆盖”颜色。对如何处理这个问题有什么建议吗？我看到了UI工具包示例的屏幕截图，示例中包含了一个进度条；但是，当前的示例没有这样的功能。

UI工具包将在Unity 2021.2中包含更多内置控件（当它包含在Unity“core”中时）

同时，您最好不要使用滑块组件，它不符合“进度条”用例

---

实现这一点最简单的方法是使用“背景”和“覆盖”元素。覆盖将是背景元素的子元素

然后，可以设置覆盖元素的宽度（以百分比为单位）

这与UI生成器中的类似：

ProgressBar.uxml：

最后，在代码中，您可以设置覆盖元素的宽度：

VisualElement progressBarOverlayElement = somePartOfYourUIHierarchy.Q("Overlay");
progressBarOverlayElement.style.width = new StyleLength(Length.Percent(30));

---

小提示：您可以通过禁用topper元素上的溢出来实现基本掩蔽

下面是进度条的背景元素，启用了溢出：

现在，溢出设置为隐藏：

这可能会激励您在进度条的根元素中执行更复杂的操作

---

---

在UI工具包论坛上讨论多种可用解决方案。似乎还没有达成共识的方法来实现这一点，但您可能会在那里找到更有趣的提示（例如，使用SVG资产的复杂形状掩蔽）。

我还没有使用2021，也没有，但通常，当我在做健康栏或任何不可交互的有进展的事情时，我会使用图像。然后我将图像类型设置为Filled而不是Simple。然后，通过访问图像组件字段FillAmount，可以从代码中设置填充百分比。我想这并不能直接回答你的问题，但现在可能是一个解决办法。Edit:[不确定这是否是您正在寻找的]（）使用图像肯定会起作用，甚至在父对象中使用另一个

元素（并更改其宽度）也会起作用。但是，这两种方法都需要复制某些样式（边界半径等），尽管这可能对自定义有意义？您可以使用0到1之间的锚定位置。这样，您可以使用图像的边框和其他形状。
.progressBar--overlay {
    background-color: rgba(243, 19, 77, 255);
}

/* optional */
.progressBar--background {
    border-left-color: rgba(103, 10, 10, 255);
    border-right-color: rgba(103, 10, 10, 255);
    border-top-color: rgba(103, 10, 10, 255);
    border-bottom-color: rgba(103, 10, 10, 255);
    border-left-width: 5px;
    border-right-width: 5px;
    border-top-width: 5px;
    border-bottom-width: 5px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    overflow: hidden;
    border-top-left-radius: 20px;
}

VisualElement progressBarOverlayElement = somePartOfYourUIHierarchy.Q("Overlay");
progressBarOverlayElement.style.width = new StyleLength(Length.Percent(30));