nativescript中的中心图像

在我尝试NativeScript教程“”之后，我发现它的按钮很难点击，这是因为点击区域太小，所以我想通过将布局文件更新为以下内容来增加图像高度。然而，图像似乎不在中心（下图）

如何在NativeScript中实现这一点

list.html

<ActionBar title="Groceries">
    <ActionItem text="Share" (tap)="share()"
                android.systemIcon="ic_menu_share_holo_dark"
                ios.systemIcon="9" ios.position="right"></ActionItem>
</ActionBar>
<GridLayout rows="auto, *">

    <GridLayout row="0" columns="*, auto" class="add-bar">
        <TextField #groceryTextField [(ngModel)]="grocery" hint="Enter a grocery item" col="0"></TextField>
        <StackLayout class="delete-container" height="100%" (tap)="add()" col="1" >
            <Image src="res://add" stretch="none" horizontalAlignment="center"></Image>
        </StackLayout>
    </GridLayout>

    <ListView [items]="groceryList" row="1" class="small-spacing" [class.visible]="listLoaded">
        <ng-template let-item="item">
            <GridLayout columns="*, auto">
                <Label col="0" [text]="item.name" class="medium-spacing"></Label>
                <StackLayout col="1" class="delete-container" height="100%" (tap)="delete(item)">
                    <Image src="res://delete"></Image>
                </StackLayout>
            </GridLayout>
        </ng-template>
    </ListView>

    <ActivityIndicator
            [busy]="isLoading" [visibility]="isLoading ? 'visible' : 'collapse'"
            row="1" horizontalAlignment="center" verticalAlignment="center"></ActivityIndicator>

</GridLayout>

---

您应该查看NS的FlexBox布局

它非常有用：