在 nativescript 中将元素定位在绝对布局的中心

Question

我有一个来自 api 的对象列表，我在 ListView 中显示。对于列表中的每个项目，我正在渲染一个绝对布局。如果该项目有照片，我会将其显示为完全拉伸，以便它在列表中显示为该项目的背景图像。然后我渲染带有项目名称的按钮，我想在图像的中心渲染它。我浏览了文档，但找不到方法。

<ListView [items]="List">
  <StackLayout>
    <template let-item="item">
      <AbsoluteLayout  class="list-item">
        <Image src="{{item.photo}}" *ngIf="item.photo" stretch="fill">  </Image>
        <Button [text]="item.name" (tap)="onItemTap(item)"></Button>
      </AbsoluteLayout>
    </template>
  </StackLayout>    
</ListView>

Answer 1

在 AbsoluteLayout 中放置一个 GridLayout，然后将 Button 放置在 GridLayout 中的中心位置：

<AbsoluteLayout  class="list-item">
    <Image src="{{item.photo}}" *ngIf="item.photo" stretch="fill">  </Image>
    <GridLayout background="transparent">
        <Button [text]="item.name" (tap)="onItemTap(item)"></Button>
    </GridLayout>
</AbsoluteLayout>