使 GridLayout 中的 NativeScript ScrollView 和 TextView 协同工作（仅 iOS）

Question

我已经尝试创建一个占据整个屏幕的 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。

Answer 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>

如果您有更多问题，请告诉我们

使 GridLayout 中的 NativeScript ScrollView 和 TextView 协同工作（仅 iOS）

Make NativeScript ScrollView and TextView inside GridLayout work together (only iOS)

scrollview

grid-layout

textview

ios

nativescript