[英]Nativescript: How to position an element in the center of the viewport, regardless of other content?
I want to position an ActivityIndicator element in the center of the phone(both vertically and horizontally). 我想将ActivityIndicator元素放置在手机的中心(垂直和水平方向)。 I have a page that looks something like that: 我有一个看起来像这样的页面:
<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>
All i want is to show/hide the ActivityIndicator , exactly in the middle of the page. 我只想显示/隐藏ActivityIndicator,恰好在页面中间。 It should be the Android equivalent of this CSS: 它应该与以下CSS在Android中等效:
.centered {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
How can this be done? 如何才能做到这一点?
Just wrap the whole content with a GridLayout
and add ActivityIndicator
as second child on the same layout. 只需用GridLayout
包裹整个内容,然后将ActivityIndicator
作为第二个孩子添加到同一布局上。 Something like, 就像是,
<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>
Then you could simply toggle the busy
attribute whenever you want to show / hide indicator. 然后,只要您想显示/隐藏指示器,就可以简单地切换busy
属性。 If adding ActivityIndicator
to every Page
is too much, then you could wrap your root Frame with GridLayout
and similarly add ActivityIndicator
there, so you will not have to add it on every Page
. 如果向每个Page
添加ActivityIndicator
过多,则可以使用GridLayout
包裹根框架,并在此处类似地添加ActivityIndicator
,因此您不必在每个Page
上添加它。
While this approach works, I would recommend using a progress dialog instead, so you can actually block user from accessing the UI if you like to, Here is Playground Sample for similar approach. 尽管此方法可行,但我建议您改用进度对话框,这样,如果您愿意,实际上可以阻止用户访问UI。这是类似方法的“ 操场示例 ”。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.