1

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

如何在 NativeScript 中实现这一点？

列表.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>

在此处输入图像描述

4

1 回答 1

1

您应该查看 NS 的 FlexBox 布局。

它非常有用： http ://docs.nativescript.org/cookbook/ui/layouts/flexbox-layout

于 2017-08-21T12:23:14.123 回答