Nativescript 7+Angular 键盘弹出时滚动失效、按钮被遮挡问题求解

对应开发环境 #

• Angular CLI: 11.2.3
• Angular: 11.0.9
• Node: 14.16.0
• Typescript: 4.0.5
• Nativescript: 7.1.2

实际遇到的问题 #

开发包含多输入框的表单页面时，点击靠前位置的输入框会触发连续异常：

• 系统键盘正常弹出
• 页面自动滚动定位到当前聚焦的输入框
• 后续无法向下滚动查看其他输入框
• 页面底部的操作按钮被弹出的键盘完全遮挡

问题核心成因 #

这个问题是NativeScript 7版本Android端的已知实现bug：

1. 键盘弹出时默认采用adjustPan逻辑把整个根布局向上平移，但没有同步更新ScrollView的内部滚动边界参数，系统错误将ScrollView的最大可滚动高度计算为0，直接把滚动位置锁死在错误的边界上，导致无法继续滑动。
2. 固定在滚动容器外的底部操作按钮没有被纳入键盘适配的高度计算逻辑，键盘弹出后会直接覆盖按钮区域。
3. 自动聚焦滚动的逻辑存在偏移计算缺陷：点击靠前的输入框时，自动滚动的偏移量没有按可视区域计算，反而被错误赋值为ScrollView的最大滚动距离，直接把滚动条拉到了最底部。

可落地的修复步骤 #

1. 调整页面布局结构 #

把原来独立在ScrollView外的底部操作按钮，移到ScrollView内部的StackLayout末尾，让所有表单内容、操作按钮都属于同一个滚动容器：

<!-- 原来的结构：ScrollView和按钮分属GridLayout的两行，调整为按钮放在ScrollView内部 -->
<GridLayout rows="120,60,*">
    <!-- 上面的标题、色卡区域保持不变 -->
    <ScrollView row="2" id="formScroll">
        <StackLayout>
            <!-- 原来的所有输入框列表 -->
            <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>
            <!-- 把原来独立的按钮移到这里，作为ScrollView的最后一个子节点 -->
            <StackLayout height="60" class="m-t-20">
                <Button text="Prosegui" (tap)="prosegui()" class="btn btn-primary"></Button>
            </StackLayout>
        </StackLayout>
    </ScrollView>
</GridLayout>

2. 显式配置键盘适配模式 #

在页面的根Page节点上，把键盘弹出的适配模式从默认的adjustPan改成adjustResize，让系统自动根据键盘高度调整页面可视区域，而不是硬平移整个页面：

<Page 
  xmlns="http://schemas.nativescript.org/tns.xsd"
  windowSoftInputMode="adjustResize">
  <!-- 页面内容 -->
</Page>

3. 监听键盘高度动态调整滚动容器 #

用NativeScript Core提供的键盘监听能力，键盘弹出时给ScrollView加对应的底部内边距，避免内容被键盘遮挡，同时重置滚动边界计算：

// 在组件ts中引入依赖
import { KeyboardHelper, ScrollView, EventData } from '@nativescript/core';

// 页面加载完成后绑定键盘监听
onPageLoaded() {
  const scrollView = this.page.getViewById<ScrollView>('formScroll');
  // 键盘高度变化时实时调整
  KeyboardHelper.keyboardHeightChanged((keyboardHeight: number) => {
    // 给滚动容器加和键盘高度一致的底部内边距，保证内容可以滚到键盘上方
    scrollView.style.paddingBottom = `${keyboardHeight}px`;
    // 触发ScrollView重新计算滚动边界，解锁卡死的滚动逻辑
    scrollView.scrollToVerticalOffset(scrollView.verticalOffset, false);
  });
}

4. 替换自动聚焦的逻辑 #

不要依赖系统默认的聚焦自动滚动能力，手动监听输入框的聚焦事件，自己计算合理的滚动偏移，绕开系统的计算bug：

<TextField 
  col="1" 
  hint="Enter text..."
  (focus)="onInputFocused($event)">
</TextField>

onInputFocused(args: EventData) {
  const input = args.object as TextField;
  const scrollView = this.page.getViewById<ScrollView>('formScroll');
  // 获取输入框在页面中的位置，计算需要滚动的距离，给键盘留足可视空间
  const inputY = input.locationInWindow.y;
  const targetOffset = Math.max(inputY - 150, 0);
  scrollView.scrollToVerticalOffset(targetOffset, true);
}

修复后的验证标准 #

• 点击靠前位置的输入框，键盘弹出后可以自由上下滑动滚动区域，不会出现滚动卡死
• 滚动到内容最底部时，操作按钮会显示在键盘上方，不会被完全遮挡
• 点击靠下位置的输入框时，页面会自动定位到输入框的可视区域，不需要手动反复调整位置

内容的提问来源于stack exchange，提问作者torosky