nativescript - 本机脚本 Listview 未正确显示

Question

我有一个页面，在顶部我显示了一个 ActionBar，在其下方我看到了一个 SegmentedBar。对于 SegmentedBar 的第一个选项卡，我显示了一个列表。该列表正在渲染，但不占用剩余空间。这是我的代码 -

<ActionBar title="NS Learning" android:position="right">
    <StackLayout orientation="horizontal" horizontalAlignment="stretch">
       <Label text="Jahid Shohel" horizontalAlignment="center"></Label>
    </StackLayout>
</ActionBar>
<GridLayout rows="auto, *" columns="*">
    <SegmentedBar row="0" #tabs [items]="items" [(ngModel)]="selectedIndex" selectedBackgroundColor="#fac950"></SegmentedBar>

    <StackLayout row="1" *ngIf="selectedIndex === 0" height="stretch">
        <tab1></tab1>
    </StackLayout>
    <StackLayout row="1" *ngIf="selectedIndex === 1" width="100%">
        <tab2></tab2>
    </StackLayout>
    <StackLayout row="1" *ngIf="selectedIndex === 2" width="100%">
        <tab3></tab3>
    </StackLayout>
</GridLayout>

我的<tab1></tab1>代码是 -

<DockLayout>
    <ListView [items]="items" dock="top">
        <template let-item="item">
            <GridLayout columns="auto, *, auto" rows="auto,auto">
                <Image row="0" rowSpan="2" col="0" src="res://user" class="post-image"></Image>
                <Label row="0" col="1" colSpan="2" text="Good morning! Have a nice day"></Label>
                <Image row="1" col="1" src="res://facebook_thumb" class="social-icon"></Image>
                <Label row="1" col="2" text="15 August 2016 11:17:26"></Label>
            </GridLayout>
        </template>
    </ListView>
</DockLayout>

渲染的列表是这样的——

知道我该如何解决吗？

Answer 1

在 ListView 上应用值为“100%”的高度属性

<ListView [items]="items" dock="top" height="100%">