居中和右/左对齐 NativeScript 布局中的项目

Question

在 NativeScript 应用程序的上下文中，我一直在努力寻找一种高效、非黑客的方式来做看似非常简单的事情：将一个项目放在布局的中心，另一个项目一直放在布局的右侧或左侧——类似于这个问题中的图像：居中和右对齐 flexbox 元素。这些项目应全部位于一行中，因为它们在那里。(我已经浏览了这些解决方案，但我不想添加伪元素，而且很多CSS都不适用于NativeScript。有没有某种干净的、规范的方法可以使用默认布局来做到这一点？ 如果这还不够"具体"，假设我有这样的场景：

<SomeLayout>
<Label text="Center me"></Label>
<Label text="Pull me to the right"></Label>
</SomeLayout>

标签的文本属性描述了我要查找的内容。请测试任何建议或确保它们有效。

Answer 1

您可以通过对两个标签应用相同的行号来将horizontalAlignment与GridLayout一起使用。

<GridLayout rows="auto" columns="*">
<Label row="0" horizontalAlignment="center" text="Center me" class="center"></Label>
<Label row="0" horizontalAlignment="right" text="Pull me to the right" class="right"></Label>
</GridLayout>

您还可以使用horizontal-align属性从 CSS 设置horizontalAlignment属性。

.center{
horizontal-align:center;
}
.right{
horizontal-align:right;
}

主要技巧是您必须为标签提供相同的行号，以便它们相互重叠。

Answer 2

NativeScript 中有预定义的类可以处理左/中/右对齐。为了右对齐，你可以使用">text-right"类。这里还有更多 https://v7.docs.nativescript.org/ui/theme#class-names

它适用于 V7，但也适用于 V8