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属性中的每一行指定单位/值

<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:带*的行将平均分配可用高度.

像素:数字值为50,100等的行将把行的高度设置为那么多像素.

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