Nativescript 3 + angular 2 : 목록보기 또는 절대 레이아웃 여백이 적용되지 않음

Question

'marginBottom'과 같은 속성을 추가하려고 시도했지만 효과가 없습니다. 목록에있는 항목 사이에 공간이 더 필요합니다. 어떻게이 일을하는 것이 가장 좋을까요?

<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>