Nativescript-vue GridLayout 行对齐
Nativescript-vue GridLayout row alignment
我缺乏任何一种 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 等
通过将列宽设置为 auto
,它的跨度足以显示里面的文本。相反,您可能希望至少其中之一在容器宽度允许的范围内伸展。
使用 *
列占用最大 space 可用,如 the docs。
前任。 columns="* * * *"
将布局拆分为 4 个相同大小的列。
我缺乏任何一种 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 等
通过将列宽设置为 auto
,它的跨度足以显示里面的文本。相反,您可能希望至少其中之一在容器宽度允许的范围内伸展。
使用 *
列占用最大 space 可用,如 the docs。
前任。 columns="* * * *"
将布局拆分为 4 个相同大小的列。