让 GridLayout 中的 NativeScript ScrollView 和 TextView 一起工作（仅限 iOS）答案

【问题标题】：Make NativeScript ScrollView and TextView inside GridLayout work together (only iOS)让 GridLayout 中的 NativeScript ScrollView 和 TextView 一起工作（仅限 iOS）
【发布时间】：2017-02-18 18:29:37
【问题描述】：

我尝试创建一个 NativeScript 页面，该页面占据整个屏幕，但如果设备的屏幕较小，则让用户滚动它。

我已经尝试了上面的两个代码，但是在这样做时，TextView 的自动高度大小受到了限制。

第一个代码是想要的布局（但是键盘打开时没有滚动视图）：

<Page class="page" 
    xmlns="http://www.nativescript.org/tns.xsd" loaded="onLoaded" navigatedTo="onNavigatingTo">
    <GridLayout rows="auto,*, auto, *,auto, *, auto" height="100%" columns="*, *" width="100%" height="100%">
        <Label class="label-bold" class='primeiros' row="0" col="0" text="O que foi positivo?" textWrap="true"></Label>
        <Label class="label-bold" class='primeiros' row="0" col="1" text="O que foi positivo?" textWrap="true"></Label>
        <TextView row="1" col="0" backgroundColor='gold' class='primeiros' returnPress="adicionar" textWrap="true" class="input" text="{{ lista.positivo }}"></TextView>
        <TextView row="1" col="1" backgroundColor='gold' class='primeiros' returnPress="adicionar" textWrap="true" class="input" text="{{ lista.negativo }}"></TextView>
        <Label class="label-bold" row="2" colSpan="2" text="Minhas ações a respeito:" textWrap="true"></Label>
        <TextView returnPress="adicionar" row="3" colSpan="2" text="{{ lista.acoes }}"></TextView>
        <Label class="label-bold" row="4" colSpan="2" text="Minha oração sobre esse dia:" textWrap="true"></Label>
        <TextView returnPress="adicionar" row="5" colSpan="2" text="{{ lista.oracao }}"></TextView>
        <Button text="Concluir Este Dia" row="6" colSpan="2" class="btn btn-primary" tap="concluirDia" />
    </GridLayout>
</Page>

在第二个代码中，我尝试将 GridLayout 和 ScrollView 一起工作，但没有成功。布局存在可用性问题。

<Page class="page" 
    xmlns="http://www.nativescript.org/tns.xsd" navigatedTo="onNavigatingTo">
    <GridLayout row="*">
        <StackLayout row="0" height="100%">
            <ScrollView>
                <GridLayout rows="auto,*, auto, *,auto, *, auto" height="100%" columns="*, *" width="100%" height="100%">
                    <Label class="label-bold" class='primeiros' row="0" col="0" text="O que foi positivo?" textWrap="true"></Label>
                    <Label class="label-bold" class='primeiros' row="0" col="1" text="O que foi positivo?" textWrap="true"></Label>
                    <TextView row="1" col="0" backgroundColor='gold' class='primeiros' returnPress="adicionar" textWrap="true" class="input" text="{{ lista.positivo }}"></TextView>
                    <TextView row="1" col="1" backgroundColor='gold' class='primeiros' returnPress="adicionar" textWrap="true" class="input" text="{{ lista.negativo }}"></TextView>
                    <Label class="label-bold" row="2" colSpan="2" text="Minhas ações a respeito:" textWrap="true"></Label>
                    <TextView returnPress="adicionar" row="3" colSpan="2" text="{{ lista.acoes }}"></TextView>
                    <Label class="label-bold" row="4" colSpan="2" text="Minha oração sobre esse dia:" textWrap="true"></Label>
                    <TextView returnPress="adicionar" row="5" colSpan="2" text="{{ lista.oracao }}"></TextView>
                    <Button text="Concluir Este Dia" row="6" colSpan="2" class="btn btn-primary" tap="concluirDia" />
                </GridLayout>
            </ScrollView>
     </StackLayout>
</GridLayout>

ios 上真正的问题是，当键盘打开时，没有滚动。所以我需要滚动视图，以便用户可以处理屏幕上的所有 TextView。

【问题讨论】：

标签： ios textview scrollview nativescript grid-layout

【解决方案1】：

这是因为键盘与您的页面内容重叠。您可以做的是在 GridLayout 下方添加另一个元素，例如 StackLayout，初始高度为 0，并在打开它时指定键盘的高度。这个link 解释了如何在 iOS 上获取键盘的高度。对于您的页面代码，我会这样做：

<Page class="page" xmlns="http://www.nativescript.org/tns.xsd" navigatedTo="onNavigatingTo">
<ScrollView>
  <GridLayout rows="auto,*, auto, *,auto, *, auto" height="100%" columns="*, *" width="100%">
    <Label class="label-bold" class='primeiros' row="0" col="0" text="O que foi positivo?" textWrap="true"></Label>
    <Label class="label-bold" class='primeiros' row="0" col="1" text="O que foi positivo?" textWrap="true"></Label>
    <TextView row="1" col="0" backgroundColor='gold' class='primeiros' returnPress="adicionar" textWrap="true" class="input"
      text="{{ lista.positivo }}"></TextView>
    <TextView row="1" col="1" backgroundColor='gold' class='primeiros' returnPress="adicionar" textWrap="true" class="input"
      text="{{ lista.negativo }}"></TextView>
    <Label class="label-bold" row="2" colSpan="2" text="Minhas a√ß√µes a respeito:" textWrap="true"></Label>
    <TextView returnPress="adicionar" row="3" colSpan="2" text="{{ lista.acoes }}"></TextView>
    <Label class="label-bold" row="4" colSpan="2" text="Minha ora√ß√£o sobre esse dia:" textWrap="true"></Label>
    <TextView returnPress="adicionar" row="5" colSpan="2" text="{{ lista.oracao }}"></TextView>
    <Button text="Concluir Este Dia" row="6" colSpan="2" class="btn btn-primary" tap="concluirDia" />
  </GridLayout>
  <StackLayout [height]="keyboardHeight" width="100%"></StackLayout>
</ScrollView>

如果您还有其他问题，请告诉我们

【讨论】：