GridLayout中的列表存在Nativescript-vue问题

时间:2019-11-19 13:48:36

标签: javascript vue.js nativescript

我对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>

1 个答案:

答案 0 :(得分:0)

耦合事物:

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