nativescript创建类似于布局的砌体

Question

I want to make a layout just like a masonry layout, which item automatically arranged to next row if the screen width is not enough. but without using gridlayout. these both layout are not working.

using stacklayout :

 <StackLayout orientation="horizontal" style="vertical-align:top;">
   <Button text="one" style="height:50;"/>
   <Button text="two" style="height:50;"/>
   <Button text="three" style="height:50;"/>
   <Button text="four" style="height:50;"/>
   <Button text="five" style="height:50;"/>
   <Button text="five" style="height:50;"/>
   <Button text="five" style="height:50;"/>
   <Button text="five" style="height:50;"/>
 </StackLayout>

using Gridlayout

    <GridLayout rows="174,174,auto" columns="147,147" horizontalAlignment="center" verticalAlignment="center">
      <Image col="0" row="0" cssClass="imglogo" src="~/images/icondapur.png" stretch="aspectFit" horizontalAlignment="center"/>
      <Image col="0" row="1" cssClass="imglogo" src="~/images/iconrokok.png" stretch="aspectFit" horizontalAlignment="center"/>
      <Image col="1" row="0" cssClass="imglogo" src="~/images/iconsabun.png" stretch="aspectFit" horizontalAlignment="center"/>
      <Image col="1" row="1" cssClass="imglogo" src="~/images/iconsnack.png" stretch="aspectFit" horizontalAlignment="center"/>
    </GridLayout>

Answer 1

您可以使用垂直方向的环绕布局来实现此布局。

Answer 2

There's (currently) no out of the box way to create a masonry layout. However, as you've full access to the platform API:s, this is something you can implement yourself.

The easiest way would be to use the Telerik UI component ListView . But please note that this is a payed component (this is the way Telerik makes money). There's, a free trial you can test with.