如何在页面级别添加活动指示器？

Question

我想在我的登录页面添加一个活动指示器小部件，但我希望它覆盖整个屏幕，所以我可以防止双击登录按钮。

任何想法，谢谢！

Answer 1

如果您将所有内容包装在GridLayout中，请添加一个StackLayout作为您想要覆盖的行中的最后一项。默认情况下，StackLayout将覆盖整个屏幕。然后你可以通过数据显示/隐藏。例如：

<GridLayout> 
    <StackLayout> 
     // All your page content goes here! 
    </StackLayout> 
    <StackLayout class="dimmer" visibility="{{showLoading ? 'visible' : 'collapsed'}}"/> 
    <GridLayout rows="*" visibility="{{showLoading ? 'visible' : 'collapsed'}}"> 
     <ActivityIndicator busy="true" /> 
    </GridLayout> 
</GridLayout> 

我有一个“调光器” StackLayout我动画为半透明的黑色，则该活动指示器坐在上面。

Answer 2

不知道你有什么布局我只能将例如（在某种程度上简化的）从我的项目

页面内ü可以把这样的事情，无论是StackLayout和ActivityIndi​​cator是内部网格布局这需要

页面的整体大小

<GridLayout rows="*" columns="*"> 

     <StackLayout visibility="{{ showLogin ? 'visible' : 'collapse'}}" row="0" column="0"> 
      <!--Login form, as you have defined--> 
     </StackLayout> 

     <!--Indicator on whole page, colSpan and rowSpan force ActivityIndicator to takes whole page--> 
     <ActivityIndicator visibility="{{ !showLogin ? 'visible' : 'collapse'}}" busy="{{ !showLogin }}" rowSpan="1" colSpan="1" row="0" column="0" /> 

    </GridLayout> 

和JavaScript代码

内210

但最好将是把已经定义的可观察，你应该有一个分配给的BindingContext

因此，基于showLogin财产U将得到明显要么ActivityIndi​​cator或形式（整页）

不当然，如果我忘了一些事情，但如果有的话，请写评论:)

Answer 3

活动指标本身不会阻止您的表单的双重提交。除了显示ActivityIndi​​cator外，您还应在提交期间将Button UI组件上的isEnabled标志设置为false。例如：

<!-- template --> 
<Button [isEnabled]="!isAuthenticating" (tap)="submit()"></Button> 

// JavaScript/TypeScript 
export class LoginComponent { 
    isAuthenticating = false; 

    submit() { 
    this.isAuthenticating = true; 
    doTheActualLogin() 
     .then(() => { 
     this.isAuthenticating = false; 
     }); 
    } 
} 

您可以找到防止双重意见书，并使用在NativeScript Groceries sample的ActivityIndi​​cator登录的完整实现。看看isAuthenticating标志是如何用于this login folder的具体实现。