NativeScript-Vue中GridLayout内列表显示异常问题求助

Hey there! I see the issue you're running into—let's break this down and get those extra labels showing up properly.

What's Causing the Problem? #

Your GridLayout has a fixed height of 175px, and your Image is also set to height:175px. Add in the padding on the Grid, and there's literally no space left for the labels in rows 1, 2, and 3. They're getting pushed outside the bounds of the Grid, which is why only the first label (sharing row 0 with the image) is visible.

How to Fix It #

We need to adjust the Grid's height to accommodate all content, and make sure the image spans all the rows where your labels are placed. Here are the key changes:

• Remove the fixed height from GridLayout: Let the grid grow to fit its content by setting height="auto" (or just omit the height attribute entirely).
• Make the image span all 4 rows: Add rowspan="4" to the Image component so it takes up the full vertical space next to your four labels, instead of only occupying row 0.
• (Optional) Adjust the image height if you don't want it to stretch to match the total height of the labels—you can set a smaller fixed height like 120px and keep stretch="aspectFit" to maintain its aspect ratio.

Corrected Code #

<GridLayout width="100%" height="auto" rows="auto,auto,auto,auto" columns="auto,*,20" backgroundColor="green" style="padding:10px 10px;">
    <Image row="0" column="0" rowspan="4" src="res://logo" loadMode="async" stretch="aspectFit" style="background-color:red; width:175px; height:175px; border-radius:10px; margin:0px 20px 0px 0px;"></Image>
    <Label text="Pacome1" fontSize="18" row="0" column="1" class="c_light" style="margin:5px 0px;"></Label>
    <Label text="Pacome2" fontSize="18" row="1" column="1" class="c_light" style="margin:5px 0px;"></Label>
    <Label text="Pacome3" fontSize="18" row="2" column="1" class="c_light" style="margin:5px 0px;"></Label>
    <Label text="Pacome4" fontSize="18" row="3" column="1" class="c_light" style="margin:5px 0px;"></Label>
    <Label :text="'fa-star' | fonticon" row="0" col="2" class="fa c_light fs_small" style="margin:10px 0px;"></Label>
</GridLayout>

Why This Works #

• By using height="auto", the GridLayout will expand vertically to fit all its child elements, so your labels in rows 1-3 won't get cut off.
• The rowspan="4" on the Image ensures it stays aligned with all four labels on the right, creating the side-by-side layout you want without overlapping or pushing content out of bounds.

内容的提问来源于stack exchange，提问作者gabogabans