Question

我在Internet上四处查看，但是找不到有效的Nativescript ListViewGridLayout示例。所有这些似乎都已过时，它们使用RadListView而不是ListView。

我尝试了telerik/nativescript-ui-samples-angular，A Deep Dive into NativeScript UI's ListView，甚至看到了Is there a way to display an image grid with tick able Images in Nativescript Angular?，但都没用。

以下是示例之一： TS代码：

filesToUpload = ["/storage/emulated/0/DCIM/Camera/NSIMG_20190424_13156.jpg",
      "/storage/emulated/0/DCIM/Camera/NSIMG_20190424_131538.jpg",
      "/storage/emulated/0/DCIM/Camera/NSIMG_20190423_225735.jpg",
      "/storage/emulated/0/DCIM/Camera/NSIMG_20190423_22571.jpg"];

HTML：

    <GridLayout tkExampleTitle tkToggleNavButton columns="*">
        <RadListView [items]="filesToUpload">
            <ng-template tkListItemTemplate let-item="item">
                <StackLayout class="garmentGrid" class="m-x-4">
                    <Image [src]="item" height="200"></Image>
                    <Progress [value]="imageUploadProgressValue[filesToUpload]" (valueChanged)="onValueChanged($event)" maxValue="100" class="">
                    </Progress>
                </StackLayout>
            </ng-template>
            <ListViewGridLayout tkListViewLayout ios:itemHeight="200" spanCount="3"></ListViewGridLayout>
        </RadListView>
    </GridLayout>

Answer 1

我像那样使用它，并且有效。

<RadListView [items]="otherDeals">
      <ListViewGridLayout tkListViewLayout scrollDirection="Vertical" itemHeight="10 0" itemWidth="100"  spanCount="3">
        </ListViewGridLayout>
      <ng-template tkListItemTemplate let-item="item" let-index="index">

        <StackLayout rows="auto" height="100%" width="100%">

          <StackLayout width="100" height="auto" (tap)="openDetails(item)">
            <StackLayout class="card-other m-5">
              some image goes here
              </StackLayout>
            <Label [text]="item.title" class="text-center h4"></Label>
            </StackLayout>

          </StackLayout>

        </ng-template>
</RadListView>

使用有效的ListViewGridLayout示例

1 个答案: