在 NativeScript 布局中居中和右/左对齐项目 [英] Center and right/left align items in a NativeScript Layout

问题描述

在 NativeScript 应用程序的上下文中，我一直在努力寻找一种有效的、非 hacky 的方法来完成看起来很简单的事情:将一个项目放在布局的中心，另一个项目一直到布局的中心布局的右侧或左侧 - 类似于此问题中的图像:居中和右对齐弹性盒元素.这些项目应该都在一行中，因为它们在那里.(我已经查看了这些解决方案，但我不想添加伪元素，而且很多 CSS 无法与 NativeScript 一起使用.)是否有某种干净、规范的方法可以使用默认布局?如果这还不够具体"，请说我有这样的场景:

In the context of a NativeScript app, I've been struggling to find an efficient, non-hacky way to do what seems pretty simple: have one item in the center of a layout, and another item all the way to the right or left of the layout--something like the images in this question: Center and right align flexbox elements. The items should all be in a single row as they are there. (I've looked through those solutions, but I don't want to add a pseudo-element, and a lot of CSS just doesn't work with NativeScript.) Is there some kind of clean, canonical way to do this with the default layouts? In case this isn't "specific" enough, say I have a scenario like this:

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

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

The text properties of the labels describe what I'm looking for. Please test any suggestions or be sure that they work.

推荐答案

您可以通过对两个标签应用相同的行号，将 horizo​​ntalAlignment 与 GridLayout 结合使用.

you can use horizontalAlignment with GridLayout by applying same row number to both the labels.

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

您还可以使用 horizo​​ntal-align 属性从 CSS 中设置 horizo​​ntalAlignment 属性.

you can also set horizontalAlignment property from CSS by using horizontal-align attribute.

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

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

main trick is that you have to give same row number to labels so that they overlap each other.

这篇关于在 NativeScript 布局中居中和右/左对齐项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！