NativeScript：GridLayout 行重叠

Question

我是 NativeScript 的新手，我正在尝试创建我的第一个应用程序。我创建了以下使用界面 XML，它看起来并不像我预期的那样。

图像本应出现在屏幕顶部，但随后所有标签都出现在其下方的行中，彼此堆叠。

<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="onPageLoaded">
    <GridLayout columns="auto, *" rows="auto, *">
        <Image row="0" col="0" colSpan="2" src="{{ imageUrl }}" /> 

        <Label row="1" col="0" text="row1-col0" cssClass="" />
        <Label row="1" col="1" text="{{ value1 }}" cssClass="" />

        <Label row="2" col="0" text="row2-col0" cssClass="" />
        <Label row="2" col="1" text="{{ value2 }}" cssClass="" />

        <Label row="3" col="0" text="row3-col0" cssClass="" />
        <Label row="3" col="1" text="{{ value3 }}" cssClass="" />

        <Label row="4" col="0" text="row4-col0" cssClass="" />
        <Label row="4" col="1" text="{{ value4 }}" cssClass="" />
    </GridLayout>
</Page>

此外，我找不到记录 <GridLayout> columns 或 rows 的位置，所以我怀疑这可能是个问题，因为其余部分对我来说似乎没问题。

我做错了什么？任何帮助，将不胜感激。谢谢！

Answer 1

您需要为 rows 属性中的每一行指定 unit/value

<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="onPageLoaded">
    <GridLayout columns="auto, *" rows="auto, auto, auto, auto, auto">
        <Image row="0" col="0" colSpan="2" src="{{ imageUrl }}" /> 

        <Label row="1" col="0" text="row1-col0" cssClass="" />
        <Label row="1" col="1" text="{{ value1 }}" cssClass="" />

        <Label row="2" col="0" text="row2-col0" cssClass="" />
        <Label row="2" col="1" text="{{ value2 }}" cssClass="" />

        <Label row="3" col="0" text="row3-col0" cssClass="" />
        <Label row="3" col="1" text="{{ value3 }}" cssClass="" />

        <Label row="4" col="0" text="row4-col0" cssClass="" />
        <Label row="4" col="1" text="{{ value4 }}" cssClass="" />
    </GridLayout>
</Page>

存在三个可能的值：

auto：该值表示应该无约束地计算内容。所以它会根据内容设置行高

star: 带*的行将平分可用高度。

pixel: 数值为 50、100 等的行会将行的高度设置为该像素数。

为了理解布局，我遇到了这个有用的 link：http://developer.telerik.com/featured/demystifying-nativescript-layouts/

NativeScript：GridLayout 行重叠

NativeScript: GridLayout Rows Overlapping

nativescript