如何在nativescript中设置max-height? [英] How to set max-height in nativescript?

问题描述

这是我的布局(这是一个nativescript-vue应用程序):

Here is my layout (It's a nativescript-vue app):

<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中内容的上方和下方将有一些空白.

Now depending on the screen size, my content either fully fits in the page in which case I want it to be vertically centralized within its container which is the ScrollView taking all the space between the top bar and navigation bar. So, in this case, there will be some empty space above and below the content, within the ScrollView.

或者，内容无法完全适合ScrollView的边界，在这种情况下，ScrollView中我的内容上方或下方的空白区域应消失，并且内容应自然可滚动.

or, the content doesn't fully fit within the boundaries of the ScrollView in which case The empty space above or below my content within the ScrollView should disappear and the content should be scrollable naturally.

如果内容合适，这会起作用，否则，我认为它不会滚动，因为它将ScrollView的高度设置得足够大以容纳其内容，从而不会再溢出.

This works if the content fits, otherwise, it doesn't scroll I think because it sets the height of the ScrollView large enough to contain its content so it doesn't overflow anymore.

我认为可以解决此问题的是，我为ScrollView设置了max-height，因此它的高度不会大于屏幕的高度.

What I think can solve this issue is that I set a max-height to the ScrollView so it's height won't be larger than the height of the screen.

推荐答案

尝试

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

我在Playground上进行了测试，它似乎给了我预期的结果.

I tested with Playground, it seems to give me the expected results.

这篇关于如何在nativescript中设置max-height?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！