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

Question

在NativeScript应用程序的上下文中,我一直在努力寻找一种有效的,非hacky方式来做一些看似非常简单的事情:在布局的中心放置一个项目,在右边或左边放置另一个项目布局 - 类似于这个问题中的图像:中心和右对齐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>

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

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

主要技巧是你必须给标签提供相同的行号,以便它们相互重叠.