How to add an activity-indicator on a page level?

问题

I would like to add an activity-indicator widget in my login page but I would like it to cover the whole screen, so I can prevent double click on the Login button.

Any idea, thanks!

回答1:

If you wrap everything in a GridLayout, add a StackLayout as the last item in the row you want to cover. The StackLayout by default will cover the whole screen. Then you can show/hide via data. For example:

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

I have a "dimmer" StackLayout that I animate to be semi transparent black, then the Activity Indicator sits on top.

回答2:

not sure what layout you have i will only put example(somehow simplified) from my project

Inside page u can put something like this, both StackLayout and ActivityIndicator are inside GridLayout which takes whole size of page

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

And inside javascript code

/*somehow add showLogin property to bindingContext*/
page.bindingContext.set("showLogin",false) //false for show ActivityIndicator

/*or*/
page.bindingContext.set("showLogin",true) //true for show form

But best would be to put to already defined Observable which you should have assigned to bindingContext

So based on showLogin property u will get visible either ActivityIndicator(on whole page) or form

Not sure if i forgot something but if something, write comment :)

回答3:

The activity indicator on its own won’t prevent dual submissions of your forms. In addition to displaying an ActivityIndicator, you should also set the isEnabled flag on your Button UI components to false during the submission. For example:

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

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

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

You can find a complete implementation of a login that prevents dual submissions and uses an ActivityIndicator in the NativeScript Groceries sample. Take a look at how the isAuthenticating flag is used in this login folder for the specific implementation.

来源：https://stackoverflow.com/questions/39124433/how-to-add-an-activity-indicator-on-a-page-level

标签

nativescript