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

Posted 2023-02-19

【中文标题】在 NativeScript 布局中居中和右/左对齐项目

【英文标题】：Center and right/left align items in a NativeScript Layout

【发布时间】：2018-12-15 09:33:51

【问题描述】：

在 NativeScript 应用程序的上下文中，我一直在努力寻找一种高效、非 hacky 的方法来完成看起来很简单的事情：将一个项目放在布局的中心，将另一个项目一直放在布局的右侧或左侧——类似于此问题中的图像：Center and right align flexbox elements。这些项目都应该在一行中，因为它们在那里。 （我已经查看了这些解决方案，但我不想添加伪元素，而且很多 CSS 无法与 NativeScript 一起使用。）是否有某种干净、规范的方法可以使用默认布局？ 如果这还不够“具体”，假设我有这样的场景：

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

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

【问题讨论】：

如果一行没有空间设置center me和pull me to the right怎么办？

@bhavinjalodara 只是假设绝对有足够的空间。所以文本可能只是标签的“c”和“r”，而且字体非常小，保证空间不会成为问题

您是否有什么特别的原因不想使用 Flexbox 来实现这一点？使容器弯曲，将第一个标签居中并将margin-left: auto; 添加到第二个标签，用边距填充额外的空间。

@CodeSpent 我可以使用html/CSS 轻松做到这一点。但是，它不适用于 NativeScript 的 FlexboxLayout（即使使用 display: flex，这在 FlexboxLayout 中不是必需的）。他们的能力有限，因为它必须在 ios 和 android 中具有相关性

实际上，我很着急，并没有在这里检查目标；我忘记将第一项居中......但无论如何，边距技巧在 NativeScript 中都失败了

【参考方案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;

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

【讨论】：

完美！我只在水平 StackLayout 中尝试过，这根本不起作用。这是一个巨大的帮助