Question

我在actionBar下有一个listview，它似乎只占用屏幕垂直空间的一半。列表在屏幕的一半内滚动。

<StackLayout orientation="vertical" height="100%">
    <ActionBar class="action-bar">
        <NavigationButton visibility="collapsed"></NavigationButton>
        <GridLayout columns="auto,*,auto" height="100%" width="100%">
            <Label col="0" text="&#xf0c9;" class="fa" (tap)="onDrawerButtonTap()"></Label>
            <Label col="1" text="Menu" class="action-bar-title"></Label>
        </GridLayout>
    </ActionBar>
    <!-- <ScrollView orientation="vertical"> -->
        <ListView [items]="restaurant_menu" class="list-group">
                <ng-template let-item="item" let-i="index">
                    <StackLayout orientation="vertical" class="list-group-item">
                        <Label [text]="item.name"></Label>
                        <GridLayout columns="*,auto,auto,auto" rows="auto" orientation="horizontal" class="list-group-item">
                            <Label [text]="'Rs. '+item.price" col="0" row="0" verticalAlignment="top"></Label>
                            <Label *ngIf="order && order[item.name]>0" text="-" col="1" row="0" verticalAlignment="top" horizontalAlignment="right"></Label>
                            <Label *ngIf="order && order[item.name]>0" [text]="order[item.name]" col="1" row="0" verticalAlignment="top" horizontalAlignment="right"></Label>
                            <Label (tap)="build_order(item.name, '+')" text="+" col="1" row="0" verticalAlignment="top" horizontalAlignment="right"></Label>
                        </GridLayout>
                    </StackLayout>
                </ng-template>
            </ListView> 
    <!-- </ScrollView> -->
</StackLayout>

将高度设置为100％不会改变结果。我想念什么？我正在使用native-core-theme，并且没有更改CSS来指示高度。

Answer 1

尝试删除ActionBar上方的StackLayout。如果是{N} Angular，则ActionBar应该是Page实例的一部分，或者只是在根级别。 ListView可以放置在它的正下方，您无需使用StackLayout即可将它们包装起来。

Nativescript + Angular上的ListView仅占据垂直屏幕的一半。使用iPhone模拟器

1 个答案: