0

I'm building my first Nativescript app with Nativescript-vue and I'm having trouble with the layout of a page.

The Documentation shows you how to layout a page but it isn't too clear on overall usage and I can't see if you can use more than one layout style per page

I'd like to start out using a stacklayout for the top of the page but then display some data in a table so I'm using grid layout for the lower part.

What I'm finding is that when I use more than one layout it only shows the last one on the page

Example: (Only the GridLayout section displays on the page, the stacklayout is invisible)

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

Q: is there a way to show more than one layout option per page?

4

2 に答える 2

1

@ Argonitas の答えは正しいですが、レイアウト コンテナーをネストすることは避けてください。この場合、GridLayout に 2 つの行を追加することをお勧めします。何かのようなもの：

<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>
于 2018-09-05T18:12:20.503 に答える