将边距底部添加到 NativeScript 中的最后一个 ListView 项

Question

我想要实现的是允许 ListView 滚动到列表中的最后一项，以清除列表视图底部的浮动按钮：

我现在通过向列表中的最后一项添加填充来做到这一点，因此列表将滚动到最后一项：

虽然这看起来不错，但问题是用户可以点击列表底部的空白区域：

向最后一个元素添加边距似乎不起作用。

知道如何在没有问题的情况下实现这种行为。 有关工作示例，请参阅 Gmail Android 应用程序。

PS：我不想迁移到 RadListView，如果这样可以解决问题，因为 RadListView 有一些性能损失:(

Answer 1

我认为这是一份工作...... nsTemplateKey

<ListView [items]="items" class="list-group" [itemTemplateSelector]="templateSelector" row="0">
<ng-template nsTemplateKey="regular" let-item="item" let-i="index">
    <GridLayout (tap)="regularAction()">
        <Label [text]="item.name" backgroundColor="red" color="white"></Label>
    </GridLayout>
</ng-template>

<ng-template nsTemplateKey="margin" let-item="item" let-i="index">
    <GridLayout marginBottom="50" rows="auto, *">
        <Label row="0" (tap)="innerClick()" [text]="item.name" backgroundColor="green" color="yellow"></Label>
        <Label row="1"><Label>
    </GridLayout>
</ng-template>

现在我们只需要最后一项具有特殊的参数和选项：

templateSelector(item, index: number, items: any) {
    return index < items.length -1 ? "regular" : "margin";
}

我认为这是一个很好的方法，现在您也可以使用isPassThroughParentEnabled和isUserInteractionEnabled与您当前的代码，您将不得不对所有这些选项进行一些尝试并找到最适合您的解决方案，干杯。

<ListView [items]="items" class="list-group" 
      backgroundColor="red" separatorColor="blue">
<ng-template let-item="item">
    <GridLayout height="60" isPassThroughParentEnabled="!isLast">
        <Label (tap)="action" isUserInteractionEnabled="!isLast"[text]="item.name" class="list-group-item" color="white"></Label>
    </GridLayout>
</ng-template>