Nativescript 7 + Angular：键盘出现时的滚动问题

Question

环境： 角 CLI：11.2.3 角度：11.0.9 节点：14.16.0 打字稿：4.0.5 原生脚本：7.1.2

我在 NS 应用程序中滚动主页时​​遇到问题。 该页面包含许多文本字段，当我触摸其中一个时，页面会在焦点文本字段上滚动。 问题是当我触摸一些第一个文本字段时：

1. 键盘出现
2. 焦点文本字段上的页面滚动
3. 无法在其他文本字段上向下滚动
4. 按钮被键盘隐藏

一些代码：

home.component.html

<ActionBar title="Compile">
</ActionBar>
<GridLayout rows="120,60,*,auto" width="380">
    <StackLayout row="0" class="m-b-20">
        <Label textWrap="true"
            text="Scroll doesn't work well when keyboard appear"
            fontWeight="Bold" fontSize="25" class="m-t-15">
        </Label>
    </StackLayout>

    <GridLayout row="1" columns="*,*,*,*,*" class="m-b-5" height="50"
        width="350" class="pill-div">
        <StackLayout col="0" verticalAlignment="center" width="60px"
            height="60px" backgroundColor="red"></StackLayout>
        <StackLayout col="1" verticalAlignment="center" width="60px"
            height="60px" backgroundColor="green"></StackLayout>
        <StackLayout col="2" verticalAlignment="center" width="60px"
            height="60px" backgroundColor="blue"></StackLayout>
        <StackLayout col="3" verticalAlignment="center" width="60px"
            height="60px" backgroundColor="yellow"></StackLayout>
        <StackLayout col="4" verticalAlignment="center" width="60px"
            height="60px" backgroundColor="black"></StackLayout>
    </GridLayout>

    <ScrollView row="2">
        <StackLayout backgroundColor="#0071c2"
            class="m-t-20 rounded-container" height="auto">
            <StackLayout class="p-20">
                <StackLayout *ngFor="let t of ids" class="p-b-10">
                    <GridLayout columns="*,100">
                        <Label col="0" color="white"
                            verticalAlignment="center" textWrap="true"
                            text="{{t}}" fontSize="15" class="m-l-15">
                        </Label>
                        <TextField col="1" hint="Enter text..."></TextField>
                    </GridLayout>
                </StackLayout>
            </StackLayout>
        </StackLayout>
    </ScrollView>

    <GridLayout row="3" rows="auto,*" orientation="vertical">
        <StackLayout row="0" height="60">
            <Button text="Prosegui" (tap)="prosegui()"
                class="btn btn-primary"></Button>
        </StackLayout>
    </GridLayout>
</GridLayout>

package.json:

{
"description": "NativeScript Application",
"license": "SEE LICENSE IN <your-license-filename>",
"readme": "NativeScript Application",
"repository": "<fill-your-repository-here>",
"dependencies": {
    "@angular/animations": "~11.0.0",
    "@angular/common": "~11.0.0",
    "@angular/compiler": "~11.0.0",
    "@angular/core": "~11.0.0",
    "@angular/forms": "~11.0.0",
    "@angular/platform-browser": "~11.0.0",
    "@angular/platform-browser-dynamic": "~11.0.0",
    "@angular/router": "~11.0.0",
    "@nativescript/angular": "~11.0.0",
    "@nativescript/core": "7.1.0",
    "@nativescript/theme": "~3.0.0",
    "reflect-metadata": "~0.1.12",
    "rxjs": "^6.6.0",
    "zone.js": "~0.11.1"
},
"devDependencies": {
    "@angular/cli": "11.2.3",
    "@angular/compiler-cli": "11.0.0",
    "@nativescript/android": "7.0.1",
    "@nativescript/ios": "7.1.0",
    "@nativescript/types": "7.0.0",
    "@nativescript/webpack": "4.0.0",
    "@ngtools/webpack": "11.0.0",
    "@schematics/angular": "10.1.0",
    "typescript": "4.0.5"
},
"main": "main.js"

}

我建了一个游乐场： https://play.nativescript.org/?template=play-ng&id=mijGSn

操场上不存在问题...所以，我只是从操场上下载了代码，迁移了 NS7 的代码并在本地构建它。本地存在问题.. 关于如何解决的任何提示？ 我附上迁移后的代码：https://drive.google.com/file/d/1PnDz-GEYVCqjeywSaCCHvlfz2r6-Wq6j/view?usp=sharing

提前致谢！！

Answer 1

Android 允许您通过向AndroidManifest.xml 添加一些配置来修改活动的行为。根据您的用例，您可以将windowSoftInputMode 设置为adjustResize 或adjustPan。

adjustResize - Activity 的主窗口总是调整大小以便为屏幕上的软键盘腾出空间

adjustPan - Activity 主窗口的内容会自动平移，因此当前焦点永远不会被键盘遮挡，用户可以随时看到他们正在输入的内容

<activity android:windowSoftInputMode="adjustResize"> </activity>