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

时间:2016-12-26 16:23:04

标签: android listview nativescript angular2-nativescript

我使用的是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)"。删除点击事件绑定使其工作。

1 个答案:

答案 0 :(得分:2)

由于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 附带的参数 e.g。

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

完整示例here