Nativescript 活动指示灯不显示是否为外部堆栈布局

我有一个简单的页面布局：

<ActionBar title="Events" class="action-bar"></ActionBar>
<StackLayout class="page">
    <ListView [items]="events" class="list-group" [class.visible]="listLoaded" *ngIf="events">
        <ng-template let-item="item">
            <StackLayout class="list-group-item" (tap)="viewDetails(item)">
                <Label class="h3" [text]="item.nome"></Label>
            </StackLayout>
        </ng-template>
    </ListView>
    <ActivityIndicator [busy]="isLoading" [visibility]="isLoading ? 'visible' : 'collapse'" horizontalAlignment="center" verticalAlignment="center"></ActivityIndicator>
</StackLayout>

当组件加载数据时，活动指示器显示在页面顶部。现在我想让它出现在页面的中央，所以我从堆叠的布局中弹出了它

<ActionBar title="Events" class="action-bar"></ActionBar>
<ActivityIndicator [busy]="isLoading" [visibility]="isLoading ? 'visible' : 'collapse'" horizontalAlignment="center" verticalAlignment="center"></ActivityIndicator>

<StackLayout class="page">
    <ListView [items]="events" class="list-group" [class.visible]="listLoaded" *ngIf="events">
        <ng-template let-item="item">
            <StackLayout class="list-group-item" (tap)="viewDetails(item)">
                <Label class="h3" [text]="item.nome"></Label>
            </StackLayout>
        </ng-template>
    </ListView>
</StackLayout>

---

但是它不再可见了！知道发生了什么吗？

把它放在堆栈布局中

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

好的，这只是一个重叠+css问题。

页面

类设置StackLayout的背景色属性，该属性始终与ActivityIndicator重叠，从而使其不可见。当然，有适当的方法来处理这种情况，也可以使ActivityIndicator可见并垂直居中，即使在

元素内部也是如此。默认情况下，nativescript angular中的所有页面、框架都需要至少一个布局作为父布局或顶部布局，这意味着，所有元素都应该包含在布局中

您可以使用绝对布局或网格布局，并在其中添加所有其他元素。一旦您能够看到微调器，只需添加一些CSS将其居中

或者简单地说：

<GridLayout class="page">
    <ListView [items]="events" class="list-group" [class.visible]="listLoaded" *ngIf="events">
        <ng-template let-item="item">
            <StackLayout class="list-group-item" (tap)="viewDetails(item)">
                <Label class="h3" [text]="item.nome"></Label>
            </StackLayout>
        </ng-template>
    </ListView>
    <ActivityIndicator [busy]="isLoading" [visibility]="isLoading ? 'visible' : 'collapse'" height="100" width="100" color="red" backgroundColor="gray" class="spinner"></ActivityIndicator>
</GridLayout>



默认情况下，此布局将在页面中心设置两个元素，并使用尽可能多的高度和宽度，因此我们需要在微调器中添加一些样式，希望这有帮助。
这没有帮助！如果我把这个StackLayout组件放在另一个StackLayout之外，它也不可见。如果我把它放在里面，它是可见的，但在页面中仍然没有垂直对齐！