如何在 nativescript 中设置最大高度？

Posted 2023-04-13

【中文标题】如何在 nativescript 中设置最大高度？

【英文标题】：How to set max-height in nativescript?

【发布时间】：2020-02-10 17:59:08

【问题描述】：

这是我的布局（这是一个 nativescript-vue 应用程序）：

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

现在取决于屏幕大小，我的内容要么完全适合页面，在这种情况下，我希望它垂直集中在其容器中，即 ScrollView 占据顶部栏和导航栏之间的所有空间。因此，在这种情况下，ScrollView 内的内容上方和下方都会有一些空白区域。

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

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

我认为可以解决这个问题的是我为 ScrollView 设置了一个最大高度，因此它的高度不会大于屏幕的高度。

【问题讨论】：

您能否显示您所见与预期的屏幕？如果没有看到页眉和页脚中的内容，很难建议布局。

页眉和页脚为空。我已将堆栈布局作为占位符。至于插槽。你真的可以想象有时它只是一个很长的文本，有时是一个很短的文本。如果它很短，它应该完全出现在屏幕中间。否则它应该占据屏幕中的所有空间并且也是可滚动的。我相信这个问题非常重要，而且很多人都在 nativescript repo 的问题中寻找这样的东西。如果您能找到解决此问题的方法，那就太好了。

【参考方案1】：

试试，

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

我用 Playground 进行了测试，它似乎给了我预期的结果。