如何使 ScrollView 子项适合 Nativescript-Vue 中 ScrollView 的大小？答案

【问题标题】：How to fit ScrollView children to the size of the ScrollView in Nativescript-Vue?如何使 ScrollView 子项适合 Nativescript-Vue 中 ScrollView 的大小？
【发布时间】：2020-02-23 18:18:09
【问题描述】：

在 Nativescript-Vue 中，如果我有一个水平的 ScrollView，其中包含一个带有一些元素的 GridLayout，比如说简单的标签，我如何确保每个单独的标签不超过 ScrollView 的宽度？这样用户会在 ScrollView 中看到一个完整的 Label（或更多，如果 Label 很短），并且文本永远不会被截断？

我试过将Labels的宽度设置为100%但是不行，试过设置GridLayout的宽度，也不行。

这就是我所拥有的

<template>
  <StackLayout height="100%" width="100%" backgroundColor="#add8e6">
    <ScrollView id="scroll" orientation="horizontal">
      <GridLayout class="m-15" rows="auto" backgroundColor="#90ee90"
                  columns="auto, auto">
        <Label class="h3 m-15" col="0" textWrap="true"
               text="Title bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 1"></Label>

        <Label class="h3 m-15" col="1"
               text="Title bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 2"></Label>
      </GridLayout>
    </ScrollView>
  </StackLayout>
</template>

【问题讨论】：

可能是我误解了，但是当你不希望你的标签超过容器的宽度时，为什么还要水平滚动呢？
因为例如我想要一个带有状态消息的可滚动条或包含一些通知或其他内容的 CardViews，然后用户可以滚动它们并在视图中完整查看每张卡片，而不是看到 50%卡在他的手机上，因为它太长了。
你检查过 nativescript-pager 插件吗？
不错！没看过谢谢

标签： vue.js nativescript scrollview width nativescript-vue

【解决方案1】：

您必须使用FlexboxLayout 而不是GridLayout。

即使内容很短，FlexboxLayout 也会占用所有可用空间。如果需要，可以通过 ScrollView 添加滚动条。

然后您可以使用justifyContent 和alignItems 来控制对齐方式，尤其是在内容较短时（例如将其置于页面中心）。

<template>
  <Page backgroundColor="#add8e6">
    <ScrollView id="scroll" orientation="horizontal">
      <FlexboxLayout class="m-15" flexDirection="row" backgroundColor="#90ee90">
        <Label class="h3 m-15" textWrap="true"
               text="Title bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 1"></Label>

        <Label class="h3 m-15"
               text="Title bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 2"></Label>
      </FlexboxLayout>
    </ScrollView>
  </Page>
</template>

【讨论】：