Как установить максимальную высоту в nativescript?

Вот мой макет (это приложение nativescript-vue):

<template>
  <GridLayout rows="*,auto,*" height="100%">
    <StackLayout row="0" />
    <ScrollView row="1" orientation="vertical">
      <StackLayout>
        <slot />
      </StackLayout>
    </ScrollView>
    <StackLayout row="2" />
  </GridLayout>
</template>

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

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

Это работает, если содержимое подходит, в противном случае он не прокручивается, я думаю, потому что он устанавливает высоту ScrollView, достаточно большую, чтобы содержать его содержимое, чтобы он больше не переполнялся.

Я думаю, что решить эту проблему может то, что я установил максимальную высоту для ScrollView, чтобы его высота не превышала высоту экрана.


person yukashima huksay    schedule 14.10.2019    source источник
comment
Можете ли вы показать на экране то, что вы видите, и то, что вы ожидаете? Не видя, что у вас в верхнем и нижнем колонтитулах, сложно предложить макет.   -  person Manoj    schedule 14.10.2019
comment
Верхний и нижний колонтитулы пусты. Я поместил макеты стека в качестве заполнителей. что касается слота. вы действительно можете представить, что иногда это просто очень длинный текст, а иногда очень короткий текст. если он короткий, он должен полностью отображаться в центре экрана. в противном случае он должен занимать все пространство на экране, а также его можно будет прокручивать. Я считаю, что этот вопрос очень важен, и многие люди искали такую ​​вещь в выпусках репозитория nativescript. Было бы здорово, если бы вы нашли способ дать ответ на эту проблему.   -  person yukashima huksay    schedule 14.10.2019


Ответы (1)


Пытаться,

<template>
  <GridLayout rows="auto,*,auto">
    <StackLayout row="0" />
    <ScrollView row="1" verticalAlignment="center">
       <StackLayout>
         <slot />
       </StackLayout>
    </ScrollView>
    <StackLayout row="2" />
  </GridLayout>
</template>

Я тестировал с Playground, похоже, он дал мне ожидаемые результаты.

Центр содержания

Прокручиваемое содержание

person Manoj    schedule 14.10.2019