Question

我正在使用Nativescript-vue构建我的第一个Nativescript应用，但是页面布局遇到了麻烦。

文档显示了如何布局页面，但总体使用情况尚不十分清楚，我看不出每个页面是否可以使用多个布局样式

我想从页面顶部开始使用stacklayout，但随后在表中显示一些数据，因此我在下部使用网格布局。

我发现的是，当我使用多个布局时，它仅显示页面上的最后一个

示例：（仅GridLayout部分显示在页面上，堆栈布局不可见）

<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>

问：有没有办法在每页上显示多个布局选项？

Answer 1

尽管@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>

Answer 2

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应该出现在Button下方。通常，您还需要将图像和按钮打包到GridLayout中，以将它们作为一个组进行控制。

nativescript vue：每页使用多个布局选项吗？

2 个答案: