Unity3d 不整洁的UI：精灵上的文本，在视口遮罩后面？

我想要一堆看起来像这样的按钮：

它位于网格布局组中。为了在精灵顶部获得文本，我使用了画布。这就是我的层次结构：

1)Top Level UI (canvas)
  2)GridList (image)
    3)Viewport (image w/mask)
      4)Content (image w/grid layout group) 
        5)ButtonPrefab
          5.10)CanvasForText w/Sort Override
            5.11)Text1
            5.12)Text2
            5.13)Text3
          5.20)Sprite

但是，带有排序顺序覆盖的dang画布意味着文本绘制在视口的遮罩之外

---

任何提示都将不胜感激

如果不限于此层次结构，最简单的解决方案在于UI元素的顺序

默认情况下，一个

画布

中的UI元素从上到下呈现，因此如果您希望在顶部绘制某些内容，只需将其移动到层次结构中其他元素的下方即可。这似乎令人困惑，因为背景是层次结构中的第一个元素，但是。。事情就是这样；）

看

元素的绘制顺序

画布中的UI元素按照它们在层次结构中出现的相同顺序绘制。首先绘制第一个子对象，然后绘制第二个子对象，依此类推。如果两个UI元素重叠，则后一个元素将显示在前一个元素的顶部

要更改显示在其他元素之上的元素，只需通过拖动这些元素来重新排列层次结构中的元素。还可以通过在转换组件上使用以下方法来控制顺序，即：

SetAsFirstSibling

、

setaslastssibling

和

SetSiblingIndex

您的层次结构应该看起来像

Top Level UI (canvas)
|--GridList (image)
   |--Viewport (image w/mask)
      |--Content (image w/grid layout group) 
         |--ButtonPrefab
            |--Sprite
            |--Text1
            |--Text2
            |--Text3

---

谢谢我无法想象这是层次结构的适当顺序，我猜我会因为阅读旧评论而被忽略。我感谢有时间回答！