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。這是類似方法的“ 操場示例 ”。