如何在頁面級別添加活動指示器？

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的具體實現。