javascript - GridLayout 中的列表的 Nativescript-vue 问题
问题描述
我对 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
而不是列。 auto
在网格布局的rows
/columns
字段中的意思是“让这个组件占用它的尺寸所需的空间”。*
意思是“占用剩余的可用空间”。你也可以2*
说“这个项目应该占用2倍于其他项目的剩余空间”。- 如果组件溢出 GridLayout,那么可能 GridLayout 内所有项目的总和大于 GridLayout 的高度。考虑在标签上设置高度或增加 GridLayout 的高度。
推荐阅读
- javascript - 数据表添加类 td 渲染
- javascript - 如何在 QML Text 上的特定单词上添加颜色
- android - 在科尔多瓦使用相机拍摄的降级图像
- django - DRF 将 OneToOneField 设置为当前登录的用户
- nginx - Nginx:是什么导致了这个 301 重定向?
- terraform - 在 terraform 中构建输出地图
- latex - Latex 模板 - 编译
- javascript - 如何通过使用循环和插入变量来解析 json 对象?
- php - Woocommerce,我需要获取 url,所以我可以从那里获取产品 ID
- python - 异步函数完成后的 Python 调用回调