如何对元素 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="username@mail.com"></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="username@mail.com"></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="username@mail.com"></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="username@mail.com"></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="username@mail.com"></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="username@mail.com"></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="username2@mail.com"></Label>
    </StackLayout>
</StackLayout>

你可以在操场上试一试here。您在问题中提到要使用 inline-block （与 display: inline 相比，主要区别在于 display: inline-block 允许在元素上设置宽度和高度。），那么您应该使用 GridLayout，它允许您为元素选择行和列。列宽和行高可以指定为像素的绝对数量、可用像素的百分比 space 或自动：

绝对: 固定像素大小。

Star (*)：尽可能多地使用 space（在填充所有自动和固定大小的列之后），按比例分配给所有星形大小的列。所以3/7和30/70是一样的。

Auto：根据包含的子元素的需要获取尽可能多的space。

<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="username@mail.com" 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="username@mail.com" 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="username@mail.com" row="2" col="2"></Label>
</GridLayout>

如何对元素 NativeScript UI 进行分组？

How to group elements NativeScript UI?

nativescript

angular2-nativescript