【问题标题】:Nativescript Delete button not showing in RadListView with swipecellNativescript Delete 按钮未显示在带有 swipecell 的 RadListView 中
【发布时间】:2023-03-27 06:31:01
【问题描述】:

通过 {N} 教程我想实现这一点:

但是我无法显示这个删除按钮。

它在其他地方显示良好的图像没有问题,我也尝试放置标签,但结果相同。

Rad Listview 组件:

<RadListView row="1" [items]="groceryList"
  swipeActions="true" (itemSwipeProgressStarted)="onSwipeCellStarted($event)">

    <ng-template let-item="item">
      <Label [text]="item.name" class="p-15"></Label>
    </ng-template>

    <GridLayout *tkListItemSwipeTemplate columns="*, auto">
      <StackLayout id="delete-view" col="1" (tap)="delete($event)" class="delete-view">
        <Image src="~/images/delete.png" ></Image>
      </StackLayout>
    </GridLayout>

  </RadListView>

CSS:

.delete-view {
    background-color: #CB1D00;
    padding: 20;
}
.delete-view Image {
    color: white;
    height: 25;
}

TS

onSwipeCellStarted(args: ListViewEventData) {
    var swipeLimits = args.data.swipeLimits;
    var swipeView = args.object;
    var rightItem = swipeView.getViewById<View>("delete-view");
    swipeLimits.right = rightItem.getMeasuredWidth();
    swipeLimits.left = 0;
    swipeLimits.threshold = rightItem.getMeasuredWidth() / 2;
  }

  delete(args: ListViewEventData) {
    let grocery = <Grocery>args.object.bindingContext;
    this.groceryService.delete(grocery.id)
      .subscribe(() => {
        let index = this.groceryList.indexOf(grocery);
        this.groceryList.splice(index, 1);
      });
  }

删除功能效果很好,但我在刷卡时得到的只是这个:

我在这里做错了什么?

【问题讨论】:

    标签: nativescript radlistview


    【解决方案1】:

    本月早些时候,我花了几天时间来解决 RadListView 的类似问题,尤其是在 iOS 上。这似乎违背了逻辑。我最终使用了一个负填充来到达我可以看到我的标签和图标的地方。如果这没有帮助,请尝试从您的 css 中删除 height:。

    【讨论】:

    • 你把负填充放在哪里?
    • 从 delete-view 开始,看看会发生什么。我经过大量的反复试验,才得到令人满意的结果。
    猜你喜欢
    • 1970-01-01
    • 2018-06-13
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多