nativescript vue:每页使用多个布局选项?
我正在使用Nativescript vue构建我的第一个Nativescript应用程序,但页面布局有问题 文档向您展示了如何布局页面,但总体使用情况不太清楚,我看不出您是否可以在每页使用多个布局样式 我想先在页面顶部使用stacklayout,然后在表格中显示一些数据,所以我在页面下部使用grid layout 我发现,当我使用多个布局时,它只显示页面上的最后一个布局 示例:页面上仅显示GridLayout部分,stacklayout不可见nativescript vue:每页使用多个布局选项?,nativescript,nativescript-vue,Nativescript,Nativescript Vue,我正在使用Nativescript vue构建我的第一个Nativescript应用程序,但页面布局有问题 文档向您展示了如何布局页面,但总体使用情况不太清楚,我看不出您是否可以在每页使用多个布局样式 我想先在页面顶部使用stacklayout,然后在表格中显示一些数据,所以我在页面下部使用grid layout 我发现,当我使用多个布局时,它只显示页面上的最后一个布局 示例:页面上仅显示GridLayout部分,stacklayout不可见 <template> <Pag
<template>
<Page class="page">
<ActionBar class="action-bar" :title="title"/>
<ScrollView>
<StackLayout>
<Image :src="img" stretch="aspectFit" v-if="img" />
<Button class="btn btn-primary" text="Buy Now" @tap="visitPage(url)" v-if="url" />
</StackLayout>
<GridLayout columns="auto, auto" rows="2*, 3*">
<Label text="Author:" row="0" col="0" padding="20px" />
<Label text="Shakespear" row="0" col="1" padding="20px" />
<Label text="Publisher" row="1" col="0" padding="20px" />
<Label text="A publisher" row="1" col="1" padding="20px" />
</GridLayout>
</ScrollView>
</Page>
</template>
问:是否有一种方法可以在每页显示多个布局选项?ScrollView只接受一个子项。但您可以将GridLayout打包到StackLayout中:
<ScrollView>
<StackLayout>
<Image :src="img" stretch="aspectFit" v-if="img" />
<Button class="btn btn-primary" text="Buy Now" @tap="visitPage(url)" v-if="url" />
<GridLayout columns="auto, auto" rows="2*, 3*">
<Label text="Author:" row="0" col="0" padding="20px" />
<Label text="Shakespear" row="0" col="1" padding="20px" />
<Label text="Publisher" row="1" col="0" padding="20px" />
<Label text="A publisher" row="1" col="1" padding="20px" />
</GridLayout>
</StackLayout>
这样,GridLayout应该显示在按钮下方。您通常会做的是,将图像和按钮打包到GridLayout中,以将它们作为一个组进行控制。尽管@Argonitas的答案是正确的,但您应该避免嵌套布局容器。在这种情况下,最好在GridLayout中添加两行。比如:
<GridLayout columns="auto, auto" rows="auto, auto, 2*, 3*">
<Image row="0" col="0" colSpan="2" :src="img" stretch="aspectFit" v-if="img" />
<Button row="1" col="0" colSpan="2" class="btn btn-primary" text="Buy Now" @tap="visitPage(url)" v-if="url" />
<Label text="Author:" row="2" col="0" padding="20px" />
<Label text="Shakespear" row="2" col="1" padding="20px" />
<Label text="Publisher" row="3" col="0" padding="20px" />
<Label text="A publisher" row="3" col="1" padding="20px" />
</GridLayout>