nativescript vue: использование более одного варианта макета на странице?

Я создаю свое первое приложение Nativescript с помощью Nativescript-vue, и у меня возникают проблемы с макетом страницы.

Документация показывает вам, как разметить страницу, но это не слишком ясно для общего использования, и я не могу понять, можете ли вы использовать более одного стиля макета на странице.

Я хотел бы начать с использования макета стека для верхней части страницы, но затем отобразить некоторые данные в таблице, поэтому я использую макет сетки для нижней части.

Я обнаружил, что когда я использую более одного макета, он показывает только последний на странице

Пример: (На странице отображается только раздел 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>

В: есть ли способ отображать более одного варианта макета на странице?


nativescript nativescript-vue
person flo    schedule 02.09.2018    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Хотя ответ @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>
person Tiago A.    schedule 05.09.2018

arrow_upward
0
arrow_downward

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, чтобы управлять ими как группой.

person moritz.vieli    schedule 05.09.2018