在Nativescript中，如何使用StackLayout实现垂直对齐的标签文本

Question

我需要这样的东西：

但这就是我目前所拥有的：

.rotate {
transform: rotate(-90deg);
font-size: 16px;
color: #FFFFFF; 
}

这是我的代码：

<StackLayout backgroundColor="#3C414B" width="12%" height="100%" horizontalAlignment="center" verticalAlignment="center" (tap)="openDrawer('Right')">
   <StackLayout class="rotate" orientation="horizontal">
      <Label class="fa" style="margin-right: 10px" text="&#xf067;"></Label>
      <Label width="100%" class="" text="New Category" textwrap="false"></Label>
   </StackLayout>
</StackLayout>

Answer 1

您将必须将高度明确设置为元素的宽度，默认情况下，transform不会处理该高度。

或者您甚至可以考虑使用图片，here是来自论坛的相关主题。

Answer 2

您似乎旋转了内部<StackLayout class="rotate" ...>，但仍然获得了外部<StackLayout width="12%" ...>的宽度限制 试试吧：

<StackLayout class="rotate" backgroundColor="#3C414B" width="100%" height="12%" horizontalAlignment="center" verticalAlignment="center">
            <StackLayout orientation="horizontal">
                <Label class="fa" style="margin-right: 10px" text="&#xf067;"></Label>
                <Label text="New Category" textwrap="false" backgroundColor="yellow"></Label>
            </StackLayout>
        </StackLayout>

或者尝试查找其他布局类型的解决方案。例如，AbsoluteLayout