Блог

Что ж, пройдя {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);
      });
  }
  

Функция удаления работает хорошо, но все, что я получаю при пролистывании, это :

Что я здесь не так понимаю?

Ранее в этом месяце я провел несколько дней, борясь с аналогичными проблемами с RadListView, особенно на iOS. Кажется, это противоречит логике. В итоге я использовал отрицательное заполнение, чтобы добраться туда, где я мог видеть свои метки и значки. Если это не поможет, попробуйте удалить height: из вашего css.