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

【问题标题】：In Nativescript how can I achieve a vertically aligned label text using StackLayout在 Nativescript 中，如何使用 StackLayout 实现垂直对齐的标签文本
【发布时间】：2018-11-12 14:13:19
【问题描述】：

我需要这样的东西：

但这是我目前拥有的：

.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>

【问题讨论】：

请记住，旋转是在调整大小后应用的。您的 width 现在是垂直的，而您的 height 是水平的。如果更改标签的背景颜色，这将变得更加明显。

标签： nativescript nativescript-telerik-ui

【解决方案1】：

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

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

【讨论】：

但是我不能给它明确的高度或宽度，因为我想显示标签 12% 的屏幕宽度和 100% 的高度，因为它一直停留在垂直屏幕的中心。

【解决方案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

【讨论】：

你还没有检查我的标签宽度是固定的 12% 是容器有我不能给标签 100% 宽度，所以它被尝试垂直使用...它不是宽度 100% 或高度 12%，它的宽度只有 12%，高度是 100%，因此使用高度可以清楚地垂直显示文本。顺便说一下有同样的问题，没有得到高度的空间，文本无论如何都会自动换行！