gridlayout中的Nativescript标签没有得到涟漪效应

Question

我使用的是 nativescript 版本 2.4.2。 android 中的标签会产生涟漪效应，但是当我在可点击的网格布局下放置标签时，不会发生涟漪效应。

考虑下面的代码

<StackLayout text="fill">
      <ListView [items]="groceryList | async | searchFilter:sb.text" class="listview">

    <template let-item="item" col="0">
      <GridLayout columns="auto,auto,*" rows="*,*" class="fa" (tap)="goToList(item)">
        <Label horizontalAlignment="left" verticalAlignment="center" [text]="item.iconFont | fonticon" class="h2 icon-thumbnail"></Label>
        <Label col="1" horizontalAlignment="center" [text]="item.name" class="listview item "></Label>
        <Label col="2" horizontalAlignment="right" text="&#xf105;" class="listview item" class="h2 arrow-icon "></Label>

      </GridLayout>
    </template>

  </ListView>
 </StackLayout>

请注意，我在 gridview 上有(tap)="goToList(item)"。删除点击事件绑定使其工作。

Answer 1

由于您的 GridLasyout 基本上是您的项目模板的容器，为什么不为列表视图项目使用内置的 itemTap 而不是为内部容器创建自己的点击。

  <ListView col="0" [items]="groceryList" (itemTap)="goToList($event)">
    <template let-item="item">
      <GridLayout columns="auto,auto,*" rows="*,*" class="fa">
        <Label col="2" horizontalAlignment="right" text="&#xf105;"></Label>
      </GridLayout>
    </template>

从这里您可以使用 $event 附带的参数 例如

public goToList(args) {
    console.log("Item Tapped at cell index: " + args.index);
    // use the index to navigate to this item
}

完整示例here