GridLayout 中的列表的 Nativescript-vue 问题答案

【问题标题】：Nativescript-vue issue with list in GridLayoutGridLayout 中的列表的 Nativescript-vue 问题
【发布时间】：2020-03-15 01:29:14
【问题描述】：

我对 natviescript 很陌生，我正在使用 GridLayout 来尽量避免布局嵌套以获得更好的性能，在我的模板中我有一个图像，然后我的旁边有四个项目的垂直列表图像，但是只显示第一个项目列表，其他项目从我的 GridLayout 债券中掉出来，我怎样才能让其他列表项目出现在第一个项目的正下方。

我的模板：

<GridLayout width="100%" height="175px" rows="auto,auto,auto,auto" columns="auto,*,20" backgroundColor="green" style="padding:10px 10px;">
    <Image row="0" column="0" 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>

【问题讨论】：

您在图标中使用了col，这是正确的术语，但在其他任何地方都显示为column，这似乎是问题所在。

标签： javascript vue.js nativescript

【解决方案1】：

几件事：

您的最后一个标签有 col 而不是列。
网格布局的rows/columns 字段中的auto 表示“让此组件占用其尺寸所需的空间”。 * 表示“占用剩余的可用空间”。你也可以像2* 这样说“这个项目应该占用2倍于其他项目的剩余空间”。
1. 如果组件溢出 GridLayout 则可能 GridLayout 内所有项目的总和大于 GridLayout 的高度。考虑在标签上设置高度或增加 GridLayout 的高度。

【讨论】：