如何混合使用ScrollView和Grid或Flexview?

时间:2018-09-02 21:00:16

标签: nativescript angular2-nativescript

我是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>

但是,我想使这些元素位于2列的网格中,但是我不知道如何解决此问题而不会使应用程序崩溃。有人可以帮我吗?

1 个答案:

答案 0 :(得分:1)

在GridLayout中的行中,auto之间缺少逗号,并且对于两列,您需要添加columns参数,例如使用asterisksnumbers或{{1} }

auto

在GridLayout内部的元素中,根据第一列或第二列添加 <GridLayout class="m-15" columns="*,*" rows="auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto"> col="0"

col="1"

https://docs.nativescript.org/ui/layouts/layout-containers中的更多内容