Nativescript-vue GridLayout 行对齐

Question

我缺乏任何一种 UI/X 技能，而且我的页面对齐确实很困难。特别是，我正在尝试构建一个类似于 Excel 的网格 - 列表中的数据行和列。我可以获取行，但所有数据都挤在一起。

 <ListView for="item in personList" class="list-group" height="200">
     <v-template>
         <GridLayout columns="auto, auto, auto, auto" rows="*" class="list-group-item">
             <Label col="0" :text="item.date" class="list-group-item-text" ></Label>
             <Label col="1" :text="item.firstName" class="list-group-item-text" ></Label>
             <Label col="2" :text="item.lastName"  class="list-group-item-text" ></Label>
             <Label col="3" :text="item.address.zip"  class="list-group-item-text"  style="align:right"></Label>
       </GridLayout>
    </v-template>
 </ListView>

显示页面时，所有文本显示为一长串。我一直无法让每个标签都显示为一个不同的单元格，最好用填充来分隔它们。我尝试设置 horizonalAlighnment="right"、padding 等

Answer 1

通过将列宽设置为 auto，它的跨度足以显示里面的文本。相反，您可能希望至少其中之一在容器宽度允许的范围内伸展。

使用 * 列占用最大 space 可用，如 the docs。前任。 columns="* * * *" 将布局拆分为 4 个相同大小的列。

Nativescript-vue GridLayout 行对齐

Nativescript-vue GridLayout row alignment

nativescript-vue