nativescript Gridlayout - 使用数字定义列和行答案

【问题标题】：nativescript Gridlayout - define columns and rows using numbersnativescript Gridlayout - 使用数字定义列和行
【发布时间】：2019-12-12 01:15:13
【问题描述】：

我的行数未知（我通过将 Http 响应广告的长度除以 2 来计算。）因此，如果我的数组有 100 个条目，则行数将为 50，因为我使用的是 2 列网格布局。我的问题很简单：有可能以某种方式绑定这个号码吗？或者我必须将其转换为 50 (*) 颗星？所以不要这样做：

rows= * ,* ,* ,* ,* ,* ,* 等... 例如，我想使用绑定值：

<GridLayout rows="{{ length+'*' }}" columns="*,*" class="calendar" />

但这行不通。有没有办法聪明地做到这一点？谢谢。

【问题讨论】：

标签： nativescript

【解决方案1】：

是的，这是可能的，这里正在工作POC。但这对您的应用程序来说可能有点过头了。不如试试RadListView with GridLayout，它可能是显示批量数据的优化方案。

【讨论】：

嗨@Manoj，谢谢。我已经尝试过 nativescript-grid-view 插件，但由于某种原因，我在从 API 渲染图像时遇到了问题——它们在开始时没有加载，你必须向下/向上滚动并且它们的图像出现了，而且它也很痛苦设置静态高度...我不知道这个 Radlist，我现在会检查一下。干杯。

【解决方案2】：

您可以通过编程方式使用GridLayout 并使用addRow()。查看文章Demystifying NativeScript Layouts。

请注意，您不必以编程方式构建整个 GridLayout。您可以创建GridLayout，然后获取对它的引用并调用addRow() 来添加行。

【讨论】：

【解决方案3】：

行和列必须使用字符串。不是数字。角度语法：[rows]=""。 JS 语法：rows={{}}

在.ts文件中定义属性：

rowsVar = '*, auto';

在 .html 文件中使用：

<GridLayout [rows]="rowsVar"></GridLayout>

或者

在.ts文件中定义属性：

rowsVar = '100';

在 .html 文件中使用：

<GridLayout [rows]="'*,auto,'+rowsVar"></GridLayout>

【讨论】：