Nativescript-vue GridLayout 行对齐答案

【问题标题】：Nativescript-vue GridLayout row alignmentNativescript-vue GridLayout 行对齐
【发布时间】：2019-10-01 02:05:08
【问题描述】：

我缺乏任何类型的 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"、填充等。

【问题讨论】：

标签： nativescript-vue

【解决方案1】：

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

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

【讨论】：

谢谢，这会更好<GridLayout columns="100, 75, 75, 300" class="list-group-item">。反正有这些百分比，因为我不知道所有设备的屏幕尺寸？此外，一列的右对齐似乎不受horizonalAlighnment="right" 的影响
你的网格宽度是固定的还是横跨整个屏幕/容器？
它横跨屏幕的宽度。我将网格高度设置为 100，因为它在上方和下方都有一个 StackLayout，这是我可以让它显示的唯一方法。
那么您可以将* 视为百分比。例如：*, *, *, * => 100% / 4 = 每颗星的 25%。 2*, 2*, *, * => 100% / (2+2+1+1) = 每颗星的 16.6%。前两个取两颗星，因此您的列将是 33.3%、33.3%、16.6%、16.6%。等等，都记录在文档中。此外，如果您在垂直间距方面遇到问题并且没有使用 ScrollView，您可以考虑使用具有相同策略的 GridLayout。
谢谢你，这比文档更有意义，你的例子给了我一个很好的方向。我目前正在将 FlexBoxLayout 用于垂直，但我会尝试使用 GridLayout，因为 Flex 似乎没有做我想要的。