Nativescript：无论其他内容如何，​​如何将元素放置在视口的中心？

Question

我想将ActivityIndi​​cator元素放置在手机的中心（垂直和水平方向）。 我有一个看起来像这样的页面：

<Page class="page">
    <ActionBar class="action-bar">
      <Label class="action-bar-title" text="Image backup"></Label>
    </ActionBar>
    <TabView :selectedIndex="selectedIndex" @selectedIndexChange="indexChange">
      <TabViewItem title="Add images">
        <StackLayout>
          <Button @tap="takePicture" text="Take picture"></Button>...
          <StackLayout v-if="newImages.length" orientation="horizontal">...</StackLayout>
          <RadListView layout="grid" ref="newImages" for="image in newImages">
            <v-template>
              ...
            </v-template>
          </RadListView>
        </StackLayout>
      </TabViewItem>
      <TabViewItem title="Backedup images">
        <StackLayout>
          <Button @tap="fetchAllBackedupImages" text="Get all backedup images"></Button>
          <StackLayout v-if="backedupImages.length" orientation="horizontal">
            ...
          </StackLayout>
          <RadListView layout="grid" ref="backedupImages" for="image in sortedBackedupImages">
            <v-template>...</v-template>
          </RadListView>
        </StackLayout>
      </TabViewItem>
    </TabView>
  </Page>

我只想显示/隐藏ActivityIndi​​cator，恰好在页面中间。 它应该与以下CSS在Android中等效：

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

如何才能做到这一点？

Answer 1

只需用GridLayout包裹整个内容，然后将ActivityIndicator作为第二个孩子添加到同一布局上。 就像是，

<Page class="page">
    <ActionBar class="action-bar">
        <Label class="action-bar-title" text="Image backup"></Label>
    </ActionBar>
    <GridLayout>
        <TabView :selectedIndex="selectedIndex" @selectedIndexChange="indexChange">
            <TabViewItem title="Add images">
                <StackLayout>
                    <Button @tap="takePicture" text="Take picture"></Button>...
                    <StackLayout v-if="newImages.length" orientation="horizontal">...</StackLayout>
                    <RadListView layout="grid" ref="newImages" for="image in newImages">
                        <v-template>
                            ...
                        </v-template>
                    </RadListView>
                </StackLayout>
            </TabViewItem>
            <TabViewItem title="Backedup images">
                <StackLayout>
                    <Button @tap="fetchAllBackedupImages" text="Get all backedup images"></Button>
                    <StackLayout v-if="backedupImages.length" orientation="horizontal">
                        ...
                    </StackLayout>
                    <RadListView layout="grid" ref="backedupImages" for="image in sortedBackedupImages">
                        <v-template>...</v-template>
                    </RadListView>
                </StackLayout>
            </TabViewItem>
        </TabView>
        <ActivityIndicator></ActivityIndicator>
    </GridLayout>
</Page>

然后，只要您想显示/隐藏指示器，就可以简单地切换busy属性。 如果向每个Page添加ActivityIndicator过多，则可以使用GridLayout包裹根框架，并在此处类似地添加ActivityIndicator ，因此您不必在每个Page上添加它。

尽管此方法可行，但我建议您改用进度对话框，这样，如果您愿意，实际上可以阻止用户访问UI。这是类似方法的“ 操场示例 ”。