Question

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

tf.nn.moments: mean: [ 0.54445559] | var: [ 0.09011541]
tf.nn.fused_batch_norm: mean: [ 0.54445559] | var: [ 0.09612311]
customs: mean: [ 0.54445559] | var: [ 0.09011537] | var + eps: [ 0.09012537] | var + sqrt(eps): [ 0.09327765]

当组件加载数据时，活动指示符显示在页面顶部。现在我希望它出现在页面的中心，所以我从堆叠布局中将其弹出

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

但它不再可见了！对于发生了什么的任何想法？

Answer 1

将其放入StackLayout

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

Answer 2

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

Answer 3

默认情况下，所有页面，本机脚本角度的框架至少需要一个布局作为父布局或顶部布局，这意味着所有元素都应包含在布局内。

您可以做的是使用绝对布局或网格布局，并在其中添加所有其他元素。一旦您能够看到微调框，只需添加一些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>

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

ActivityIndicator不显示外部stacklayout

3 个答案:

ActivityIndi​​cator不显示外部stacklayout

3 个答案:

ActivityIndicator不显示外部stacklayout