-1

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

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

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

4

3 回答 3

0

将其放入 StackLayout

<StackLayout horizontalAlignment="center" [visibility]="isLoading ? 'visible' : 'collapse'" verticalAlignment="center">
    <ActivityIndicator [busy]="isLoading"></ActivityIndicator>
</StackLayout>
于 2017-06-29T19:09:02.967 回答
0

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

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

于 2020-06-11T01:07:03.860 回答
0

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

于 2017-06-30T17:20:08.853 回答