Как я могу смешивать ScrollView и Grid или Flexview?

Я новичок в nativescript. Я только что просмотрел руководство и смог сделать базовые части приложения с ScrollView следующим образом:

<ScrollView (scroll)="onScroll($event)">
    <GridLayout class="m-15" rows="auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto">
     <Label class="h3 m-5" height="50" row="0" text="Title 1"></Label>
    <Image class="h3 m-5" row="1" src="https://play.nativescript.org/dist/assets/img/NativeScript_logo.png" height="80" width="80"></Image>
   <Label class="h3 m-5" height="50" row="2" text="Title 3"></Label>
   <Label class="h3 m-5" height="50" row="3" text="Title 4"></Label>
   <Label class="h3 m-5" height="50" row="4" text="Title 5"></Label>
   <Label class="h3 m-5" height="50" row="5" text="Title 6"></Label>
   <Label class="h3 m-5" height="50" row="6" text="Title 7"></Label>
   <Label class="h3 m-5" height="50" row="7" text="Title 8"></Label>
   <Label class="h3 m-5" height="50" row="8" text="Title 9"></Label>
   <Label class="h3 m-5" height="50" row="9" text="Title 10"></Label>
   <Label class="h3 m-5" height="50" row="10" text="Title 10"></Label>
   <Label class="h3 m-5" height="50" row="11" text="Title 11"></Label>
   <Label class="h3 m-5" height="50" row="12" text="Title 12"></Label>
   <Label class="h3 m-5" height="50" row="13" text="Title 13"></Label>
   <Label class="h3 m-5" height="50" row="14" text="Title 14"></Label>
   <Label class="h3 m-5" height="50" row="15" text="Title 15"></Label>
</GridLayout>
</ScrollView>

Тем не менее, я хотел бы сделать так, чтобы эти элементы находились в сетке из двух столбцов, однако я не могу понять, как это сделать без сбоя приложения. Кто-нибудь может мне помочь, пожалуйста?


person Community    schedule 02.09.2018    source источник


Ответы (1)


в строках в GridLayout отсутствует запятая между auto, а для двух столбцов вам нужно добавить параметр columns, например, с asterisks или numbers или auto

 <GridLayout class="m-15" columns="*,*" rows="auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto">

И в элементах внутри GridLayout добавьте col="0" или col="1" в зависимости от того, первый или второй столбец

<Label class="h3 m-5" height="50" col="0" row="2" text="Title 3"></Label> //third row, first column
<Label class="h3 m-5" height="50" col="1" row="2" text="Title 4"></Label> //third row, second column

Подробнее см. https://docs.nativescript.org/ui/layouts/layout-containers < / а>

person Marek Maszay    schedule 03.09.2018