來自陣列的Nativescript角動態網格佈局

Nativescript新手在這裏！我一直試圖以網格格式顯示對象數組內的項目（如：https://www.npmjs.com/package/nativescript-grid-view），但無濟於事。我能夠循環並與下面的代碼顯示在一個正常的列表視圖中的項目：來自陣列的Nativescript角動態網格佈局

<GridLayout> 
    <ListView [items]="itemList" class="small-spacing"> 
     <ng-template let-item="item"> 
      <Label [text]="item.name" class="medium-spacing"></Label> 
     </ng-template> 
    </ListView> 
</GridLayout>

這裏是我的陣列結構：

[{"id":1, "name":"item1"},{"id":2, "name":"item2"},{"id":3, "name":"item3"},{"id":4, "name":"item4"},...]

我很想能夠動態/編程方式生成和填充細胞在網格與如下從樣品陣列上面2或3（最大）的列中的數據：

+-------------+-------------+-------------+ 
|    |    |    | 
|    |    |    | 
|    |    |    | 
+-------------+-------------+-------------+ 
|    |    |    | 
|    |    |    | 
|    |    |    | 
+-------------+-------------+-------------+ 
|    |    |    | 
|    |    |    | 
|    |    |    | 
+-------------+-------------+-------------+

我曾嘗試很少提到這種情況下我在網上找到的，但沒有喜悅 - 請幫助！

來源

2017-06-17 Sech

實現此目的的一個簡單方法是使用RadListView with StaggeredLayout。 RadListView可以與nativescript-telerik-ui（非專業版）一起使用，並且可以設置爲按照上面的鏈接所示以交錯的單元格對其項目進行排序。

<ListViewStaggeredLayout tkListViewLayout spanCount="3"></ListViewStaggeredLayout>

完整的示例演示如何使用RadListView交錯佈局，可以發現here

來源

2017-06-21 08:11:23

來自陣列的Nativescript角動態網格佈局

回答

相關問題