Nativescript 3 + angular 2: Listview 或绝对布局边距不生效

Question

如您所见，我已尝试添加属性，例如 'marginBottom'，但这些都没有效果。我希望列表中的项目之间有更多 space。我最好怎么做才能做到这一点？

<ListView [items]="data" class="small-spacing">
  <ng-template let-item="item" class="small-spacing" marginBottom="20">
      <AbsoluteLayout width="90%" height="110" margin="10" marginBottom="20" backgroundColor="lightblue" class="card" (tap)="navigateToItem(item._id)">
          <Image [src]="item.thumbnail" left="10" top="10" width="70" height="90"></Image>
          <Label [text]="item.title" left="90" top="10" width="60%" height="20" ></Label>
          <Label [text]="item.subtitle" left="90" top="30" width="60%" height="20" textWrap="true" ></Label>
          <Label [text]="item.date" left="90" top="50" width="60%" height="70" class="small-text"></Label>
      </AbsoluteLayout>
  </ng-template>
</ListView>

Answer 1

我找到的解决方案是在 ng-template 中使用 stackLayout。 marginBottom 和 marginTop 属性然后将元素正确定位在 StackLayout 中。

<ListView [items]="data" class="small-spacing">
  <ng-template let-item="item" class="small-spacing"  style="margin-bottom: 20;">
        <StackLayout class="itemTemplateStackLayout" orientation="vertical">
            <AbsoluteLayout width="90%" height="110" margin="10" marginBottom="20" marginTop="20" backgroundColor="lightblue" class="card" (tap)="navigateToItem(item._id)">
                <Image [src]="item.thumbnail" left="10" top="10" width="70" height="90"></Image>
                <Label [text]="item.title" left="90" top="10" width="60%" height="20" ></Label>
                <Label [text]="item.subtitle" left="90" top="30" width="60%" height="20" textWrap="true" ></Label>
                <Label [text]="item.date" left="90" top="50" width="60%" height="70" class="small-text"></Label>
            </AbsoluteLayout>
        </StackLayout>
  </ng-template>
</ListView>

Nativescript 3 + angular 2: Listview 或绝对布局边距不生效

Nativescript 3 + angular 2: Listview or absolute layout margin not taking effect

listview

absolutelayout

nativescript

angular2-nativescript