本地腳本中絕對佈局中心的位置元素

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內組件。 現在，如果您擁有相同尺寸的圖片，這些事情非常容易 - 您可以根據縮略圖大小提供左側和上側的位移。或者您可以提供基於代碼隱藏計算的左側位移和頂部位移以及一些更具約束力的綁定。

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