Nativescript-vue GridLayout выравнивание строк - PullRequest
Новая
       2

Nativescript-vue GridLayout выравнивание строк

0 голосов
/ 01 октября 2019

Мне не хватает каких-либо навыков 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 и т. Д.

1 Ответ

1 голос
/ 01 октября 2019

Если для ширины столбца установлено значение auto, оно будет достаточно для отображения текста внутри. Вместо этого вы можете захотеть, чтобы хотя бы один из них растянулся настолько, насколько позволяет ширина контейнера.

При использовании * столбец занимает максимально доступное пространство, как в документах . Ex. columns="* * * *" чтобы разбить макет на 4 столбца одинакового размера.

...