如何分组元素NativeScript UI？

Question

如何在块中对元素进行分组？

<Label class="sidedrawer-header-image fa" text="&#xf2bd;"></Label>
<Label class="sidedrawer-header-brand" text="User Name"></Label>
<Label class="footnote" text="[email protected]"></Label>

我需要做类似的事情：

<div class="inline">
    <Label class="sidedrawer-header-image fa" text="&#xf2bd;"></Label>
    <Label class="sidedrawer-header-brand" text="User Name"></Label>
    <Label class="footnote" text="[email protected]"></Label>
</div>
<div class="inline">
    <Label class="sidedrawer-header-image fa" text="&#xf2bd;"></Label>
    <Label class="sidedrawer-header-brand" text="User Name"></Label>
    <Label class="footnote" text="[email protected]"></Label>
</div>
<div class="inline">
    <Label class="sidedrawer-header-image fa" text="&#xf2bd;"></Label>
    <Label class="sidedrawer-header-brand" text="User Name"></Label>
    <Label class="footnote" text="[email protected]"></Label>
</div>

其中<div class="inline">是内联块

Answer 1

用div替换你的StackLayout并将orientation设置为horizontal。

<StackLayout orientation="vertical">
    <StackLayout orientation="horizontal">
        <Label class="sidedrawer-header-image fa" text="&#xf2bd;"></Label>
        <Label class="sidedrawer-header-brand" text="User Name"></Label>
        <Label class="footnote" text="[email protected]"></Label>
    </StackLayout>

    <StackLayout orientation="horizontal">
        <Label class="sidedrawer-header-image fa" text="&#xf2bd;"></Label>
        <Label class="sidedrawer-header-brand" text="User Name 1"></Label>
        <Label class="footnote" text="[email protected]"></Label>
    </StackLayout>

    <StackLayout orientation="horizontal">
        <Label class="sidedrawer-header-image fa" text="&#xf2bd;"></Label>
        <Label class="sidedrawer-header-brand" text="User Name"></Label>
        <Label class="footnote" text="[email protected]"></Label>
    </StackLayout>
</StackLayout>

你可以在游乐场here尝试一下。您在问题中提到要使用inline-block（与显示：内联相比，主要区别在于显示：内联块允许在元素上设置宽度和高度。），那么你应该使用GridLayout，它允许你为您的元素选择行和列。列的宽度和行的高度可以指定为绝对像素数，可用空间的百分比或自动：

绝对：固定像素大小。

星号（*）：占用尽可能多的空间（在填充所有自动和固定大小的列之后），按比例划分所有星形大小的列。所以3/7意味着与30/70相同。

自动：占用所包含的子元素所需的空间。

<GridLayout columns="*, *, *" rows="*, *, *" width="400" height="400"
    backgroundColor="lightgray">
    <Label class="sidedrawer-header-image fa" text="&#xf2bd;" row="0"
        col="0"></Label>
    <Label class="sidedrawer-header-brand" text="User Name" row="0"
        col="1"></Label>
    <Label class="footnote" text="[email protected]" row="0" col="2"></Label>

    <Label class="sidedrawer-header-image fa" text="&#xf2bd;" row="1"
        col="0"></Label>
    <Label class="sidedrawer-header-brand" text="User Name" row="1"
        col="1"></Label>
    <Label class="footnote" text="[email protected]" row="1" col="2"></Label>

    <Label class="sidedrawer-header-image fa" text="&#xf2bd;" row="2"
        col="0"></Label>
    <Label class="sidedrawer-header-brand" text="User Name" row="2"
        col="1"></Label>
    <Label class="footnote" text="[email protected]" row="2" col="2"></Label>
</GridLayout>