NativeScript: GridLayout Rows Overlapping

问题

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>

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!

回答1:

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>

There are three possible values:

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.

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

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

来源：https://stackoverflow.com/questions/31626532/nativescript-gridlayout-rows-overlapping

标签

nativescript