ActivityIndicator 不显示是否在堆栈布局之外答案

【问题标题】：ActivityIndicator not showing if outside stacklayoutActivityIndicator 不显示是否在堆栈布局之外
【发布时间】：2017-06-28 17:14:17
【问题描述】：

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

<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>

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

【问题讨论】：

标签： nativescript angular2-nativescript activity-indicator nativescript-telerik-ui nativescript-angular

【解决方案1】：

把它放在 StackLayout 中

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

【讨论】：

这没有帮助！如果我将此 StackLayout 组件放在另一个 StackLayout 之外，它也不可见。如果我把它放在里面，它是可见的，但在页面中仍然没有垂直对齐！

【解决方案2】：

好的，这只是一个重叠的 + css 问题。 page 类设置 StackLayout 的背景颜色属性，该属性始终与 ActivityIndicator 重叠，从而使其不可见。当然有适当的方法来处理这种情况，并且即使在 .page 元素内也可以使 ActivityIndicator 可见并垂直居中

【讨论】：

【解决方案3】：

默认情况下，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>

这种布局默认会将两个元素都设置在页面的中心，并使用尽可能多的高度和宽度，因此我们需要为微调器添加一些样式，希望对您有所帮助。

【讨论】：