NativeScript:GridLayout行重叠 [英] NativeScript: GridLayout Rows Overlapping

问题描述

我是NativeScript的新手，正在尝试创建我的第一个应用程序.我创建了以下使用界面XML，但外观与我预期的不同.

I'm new to NativeScript and I'm trying to create my first app. I created the following use interface XML, and it doesn't look as I expected.

图像应按原样显示在屏幕顶部，但是所有标签都显示在其下方的行中，彼此堆叠.

The image appears at the top of the screen as it should, but then all the labels appear in the row underneath it, stacked on top of each other.

<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的记录位置，所以我怀疑这可能是个问题，因为其余的对我来说似乎还可以.

Also, I couldn't find where <GridLayout> columns or rows are documented, so I suspect that might be an issue, because the rest seems OK to me.

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

What am I doing wrong? Any help would be appreciated. Thank you!

推荐答案

您需要为rows属性中的每一行指定单位/值

You need to specify unit/value for each row in rows attribute

<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: The value indicates that content should be calculated without constraints. So it will set the height of row as per its content

星:带*的行将平均划分可用高度.

star: Rows with * will equally divide the available height.

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

pixel: Rows with number value like 50, 100 etc. will set the height of the row to that much pixels.

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

For understanding layouts, I have come across this helpful link: http://developer.telerik.com/featured/demystifying-nativescript-layouts/

这篇关于NativeScript:GridLayout行重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！