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>

Answer 2

您可以为AbsoluteLayout中的组件设置左和顶部。现在，如果您拥有相同大小的图像，那么事情就非常简单了 - 您可以根据缩略图大小从左侧和顶部提供位移。或者，您可以根据代码隐藏计算和更多绑定提供左侧和顶部位移 e.g。

  <AbsoluteLayout>
    <Image src="{{item.photo}}" *ngIf="item.photo" stretch="fill">  </Image>
    <Button text="This is Label 1" [left]="leftValueBasedOnImageSize" [top]="topValueBasedOnImageSize" ></Button>
  </AbsoluteLayout>

您还可以设置绝对布局的大小，并根据该尺寸将按钮置于中心。

  <AbsoluteLayout width="300" height="300">
    <Image src="{{item.photo}}" left="0" top="0" width="300" height="300" stretch="aspectFill">  </Image>
    <Button text="Button" left="120" top="130" height="40" [left]="leftValue" [top]="topValue" ></Button>
  </AbsoluteLayout>

Answer 3

尝试此本机脚本也接受百分比值

<AbsoluteLayout>
  <Image src="your-image-here.jpg" width="100%" height="220"></Image>
  <GridLayout top="50%" left="50%" width="100%">
    <Label text="Lorem Ipsum" textWrap="true">
 </GridLayout>
</AbsoluteLayout>

nativescript中绝对布局中心的位置元素

3 个答案: