如何在 GridLayout 中动态排列项目？答案

【问题标题】：How to dynamically arrange items in a GridLayout?如何在 GridLayout 中动态排列项目？
【发布时间】：2019-01-13 07:31:54
【问题描述】：

我通过循环遍历Nativescript-Vue 中的数组来打印一些标签。我希望标签排列在网格中。这是我的模板：

<GridLayout columns="auto,auto" rows="auto,auto">
  <label
    v-for="(item, index) in items"
    :text="item"
    :key="index"
  />
</GridLayout>

这是items 数组：

export default {
  data() {
    return {
      items: ["A", "B","C","D","E","F"]
    }
  }

如何将 row 和 column 属性动态分配给 <label> ？我可以手动完成，但无法循环遍历数组。我希望它井井有条，比如

一个 |乙

C | D

E | F

【问题讨论】：

标签： vue.js nativescript nativescript-vue

【解决方案1】：

使用计算属性根据项目数计算行数。然后根据索引为每个Label绑定row & col。

<template>
    <Page class="page">
        <ActionBar title="Home" class="action-bar" />
        <ScrollView>
            <GridLayout columns="*,*" :rows="rows">
                <Label v-for="(item, index) in items" :text="item" :key="index"
                    :row="index / 2" :col="index % 2" class="h1"></Label>
            </GridLayout>
        </ScrollView>
    </Page>
</template>

<script>
    export default {
        data() {
            return {
                items: ["A", "B", "C", "D", "E", "F"]
            };
        },
        computed: {
            rows: function() {
                const rows = [];
                for (let i = 0; i < this.items.length / 2; i++) {
                    rows.push("auto");
                }
                return rows.join(",");
            }
        }
    };
</script>

Playground Sample

【讨论】：

谢谢 Manoj！只是想知道一件事，我对 Nativescript-Vue 很陌生。这是最好的方法吗？这些额外的计算会影响应用性能吗？
就性能而言，当您拥有最少且已知的列/行数时，GridLayout 是最好的。行数/列数越多，测量过程越多，性能越差。您也可以尝试使用 ListViewGridLayout 的 RadListView，当您必须呈现长列表时，这对性能很有好处。