Center and right/left align items in a NativeScript Layout

问题

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.

回答1:

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>

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.

来源：https://stackoverflow.com/questions/51216083/center-and-right-left-align-items-in-a-nativescript-layout

标签

nativescript