如何居中活动指示器叠加NativeScript

Question

我的问题

经过数小时的反复试验，终于使我的页面看起来像我想要的样子。但是，现在我试图在页面加载时添加“活动指标”微调器，并且花了很多时间甚至无法显示它。

这是我指的页面：

底部按钮是固定的，不会滚动。我认为这是我问题的一部分。

我的XML

<Page loaded="pageLoaded" class="page"
    xmlns="http://www.nativescript.org/tns.xsd">
    <ActionBar class="action-bar customActionBar" >
        <NavigationButton ios:visibility="collapsed" icon="res://menu" tap="onDrawerButtonTap"></NavigationButton>
        <ActionItem icon="res://navigation/menu" 
            android:visibility="collapsed" 
            tap="onDrawerButtonTap"
            ios.position="left"></ActionItem>
        <Label class="action-bar-title" text="Signup"></Label>
    </ActionBar>
    <DockLayout width="100%" height="100%" backgroundColor="lightgray" class="page-gradient"
        stretchLastChild="false">
        <Button id="signUpButton" class="submitButton h2 border" text="{{ showDetails ? 'Hide' : 'Next' }}" height="60" dock="bottom"
            tap="onSignupButtonTap" returnKeyType="next"/>
        <!-- content -->
        <StackLayout dock="top" width="100%" height="75" >
            <Image class="" src="~/images/signup/step-1-on.png" stretch="fill" />
            <Image style="margin-top: 15"  src="~/images/signup/progress.png" stretch="fill" />
        </StackLayout>
        <ScrollView>
            <StackLayout class="">
                <Label text="Choose Your Program" class="h3 ChooseHeader" width="100%"/>
                <Image src="~/images/chooseYourCourse/diabetes.png" 
        stretch="aspectFit" 
        class="productImage  "
        tap="onDiabetesTap"
        id="diabetes"
        name="diabetes"></Image>
                <Image src="~/images/chooseYourCourse/generalHealth.png" 
            stretch="aspectFit" 
            class="productImage "
            tap="tapGeneral" borderRadius="30" borderStyle="solid"></Image>
                <Image src="~/images/chooseYourCourse/hypertention.png" 
            stretch="aspectFit" 
            class="productImage"
            tap="tapHypertention"></Image>
                <Label class="m-10 p-10" text="Our programs adhere to the most current medical research."/>
            </StackLayout>
        </ScrollView>
        <!-- end content -->
    </DockLayout>
     <StackLayout verticalAlignment="middle">
        <ActivityIndicator busy="{{ isBusy }}" />
    </StackLayout>
</Page>

以下是我的代码：

const Signup2ViewModel = require("./signup2-view-model");
const app = require("tns-core-modules/application");
const frameModule = require("tns-core-modules/ui/frame");
var dialogs = require("tns-core-modules/ui/dialogs");
const topmost = require("tns-core-modules/ui/frame").topmost;
var gesturesModule = require("tns-core-modules/ui/gestures");
const view = require("tns-core-modules/ui/core/view");
const ActivityIndicator = require("tns-core-modules/ui/activity-indicator").ActivityIndicator;
var signup2ViewModel = new Signup2ViewModel({ isBusy: false });

var card;
var exp;
var cvc;
var signUpButton;

function onNavigatingTo(args) {
    const page = args.object;
    pageArgs = page;
    page.bindingContext = signup2ViewModel;
    setTimeout(() => {
        console.log("here");
        signup2ViewModel.isBusy = true;
        // Hides the soft input method, ususally a soft keyboard.
    }, 5100);

}

exports.loaded = function (args) {
    var page = args.object;
    page.bindingContext = signup2ViewModel;
    signup2ViewModel.isBusy = false;
};

function onDiabetesTap(args) {
    console.log(args);
    //alert("Diabetes");

    args.object.page.frame.navigate({
        moduleName: "./signup3/signup3-page",
        animated: true,
        transition: {
            name: "slideLeft",
            duration: 380,
            curve: "easeIn"
        }
    });

}

function onDrawerButtonTap(args) {
    const sideDrawer = app.getRootView();
    sideDrawer.showDrawer();
}

function onSignupButtonTap(args) {
    signup2ViewModel.set("authenticating", true);
}

exports.onDiabetesTap = onDiabetesTap;
exports.onSignupButtonTap = onSignupButtonTap;
exports.onDrawerButtonTap = onDrawerButtonTap;

如您所见，我将isBusy设置为true onNavigateTo，并在加载时设置为false。

这是行不通的，您能指出我正确的方向吗？我确定确实需要帮助。

谢谢。

约翰

Answer 1

Page组件不能有多个子元素。尝试用GridLayout包装整个页面内容。

<Page>
  ...
  <GridLayout>
    <DockLayout ...
    </DockLayout>
    <ActivityIndicator busy="{{ isBusy }}" />
  </GridLayout>
</Page>

如果仍有问题，请分享一个最小的Playground示例。