时间戳

首页 > 解决方案 > Nativescript+Angular 上的 ListView 只占了竖屏的一半。使用 iPhone 模拟器

ios - Nativescript+Angular 上的 ListView 只占了竖屏的一半。使用 iPhone 模拟器

问题描述

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

<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% 不会改变结果。我错过了什么？我正在使用本机核心主题，并且没有决定高度的 css 更改。

标签： ioscssangularios-simulatornativescript

解决方案

尝试删除 ActionBar 上方的 StackLayout。ActionBar 应该是 Page 实例的一部分，或者在 {N} Angular 的情况下只是在根级别。ListView 可以放在它的正下方，你不需要 StackLayout 来包装它们。

推荐阅读