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>

显示页面时，所有文本都显示为一个长字符串。我一直无法使每个标签都显示为不同的单元格，理想情况下是用填充符将它们分开。我尝试设置horizontalAlighnment =“ right”，填充等。

Answer 1

通过将列宽设置为auto，它的跨度足以显示内部文本。相反，您可能希望至少其中之一拉伸容器宽度允许的最大长度。

与the docs一样，使用*列将占用最大可用空间。例如columns="* * * *"将布局分成4个相同大小的列。

Nativescript-vue GridLayout行对齐

1 个答案: