键盘弹出时如何提升底部模态表单（Bottom Modal Sheet）高度？

不管是Web端、移动端原生应用还是跨平台框架开发，都能实现点击输入框时底部模态表单上移至键盘上方的效果，以下是不同场景的具体实现思路和示例代码：

Web端实现 #

• 核心思路：监听输入框的focus/blur事件，结合浏览器的可视区域变化（通过visualViewport API）计算键盘高度，动态调整模态框的位置。
• 示例代码：

const bottomModal = document.getElementById('bottom-modal');
const inputField = bottomModal.querySelector('input');

// 输入框聚焦时监听可视区域变化
inputField.addEventListener('focus', () => {
  window.visualViewport.addEventListener('resize', adjustModalPos);
});

// 输入框失焦时移除监听并恢复模态框位置
inputField.addEventListener('blur', () => {
  window.visualViewport.removeEventListener('resize', adjustModalPos);
  bottomModal.style.transform = 'translateY(0)';
});

function adjustModalPos() {
  const keyboardHeight = window.innerHeight - window.visualViewport.height;
  if (keyboardHeight > 0) {
    bottomModal.style.transform = `translateY(-${keyboardHeight}px)`;
  }
}

iOS原生实现 #

• 核心思路：通过监听系统发出的键盘弹出/收起通知，获取键盘高度后调整模态视图的布局约束。
• 示例Objective-C代码：

// 注册键盘通知
- (void)viewDidLoad {
    [super viewDidLoad];
    [[NSNotificationCenter defaultCenter] addObserver:self
                                             selector:@selector(keyboardWillShow:)
                                                 name:UIKeyboardWillShowNotification
                                               object:nil];
    [[NSNotificationCenter defaultCenter] addObserver:self
                                             selector:@selector(keyboardWillHide:)
                                                 name:UIKeyboardWillHideNotification
                                               object:nil];
}

// 处理键盘弹出事件
- (void)keyboardWillShow:(NSNotification *)notification {
    NSDictionary *keyboardInfo = notification.userInfo;
    CGRect keyboardFrame = [[keyboardInfo objectForKey:UIKeyboardFrameEndUserInfoKey] CGRectValue];
    CGFloat keyboardHeight = keyboardFrame.size.height;
    
    // 调整模态表单的底部约束，带动画过渡
    self.modalBottomConstraint.constant = keyboardHeight;
    [UIView animateWithDuration:0.3 animations:^{
        [self.view layoutIfNeeded];
    }];
}

// 处理键盘收起事件
- (void)keyboardWillHide:(NSNotification *)notification {
    self.modalBottomConstraint.constant = 0;
    [UIView animateWithDuration:0.3 animations:^{
        [self.view layoutIfNeeded];
    }];
}

// 记得移除通知
- (void)dealloc {
    [[NSNotificationCenter defaultCenter] removeObserver:self];
}

Android原生实现 #

• 核心思路：通过监听布局全局变化计算键盘高度，动态调整模态框的底部外边距；也可以直接在Manifest中给Activity设置android:windowSoftInputMode="adjustResize"让布局自动适配。
• 手动调整的示例代码：

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    
    View rootView = getWindow().getDecorView().findViewById(android.R.id.content);
    View bottomModal = findViewById(R.id.bottom_modal);
    
    rootView.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
        @Override
        public void onGlobalLayout() {
            Rect visibleFrame = new Rect();
            rootView.getWindowVisibleDisplayFrame(visibleFrame);
            int screenHeight = rootView.getRootView().getHeight();
            int keyboardHeight = screenHeight - visibleFrame.bottom;
            
            // 当高度差超过屏幕15%时判定为键盘弹出
            if (keyboardHeight > screenHeight * 0.15) {
                ViewGroup.MarginLayoutParams params = (ViewGroup.MarginLayoutParams) bottomModal.getLayoutParams();
                params.bottomMargin = keyboardHeight;
                bottomModal.setLayoutParams(params);
            } else {
                ViewGroup.MarginLayoutParams params = (ViewGroup.MarginLayoutParams) bottomModal.getLayoutParams();
                params.bottomMargin = 0;
                bottomModal.setLayoutParams(params);
            }
        }
    });
}

React Native跨平台实现 #

• 核心思路：利用框架提供的Keyboard模块监听键盘事件，通过动画组件动态调整模态框的位移。
• 示例代码：

import React, { useState, useEffect } from 'react';
import { View, TextInput, Animated, Keyboard, StyleSheet } from 'react-native';

const BottomModalInput = () => {
  const [keyboardHeight] = useState(new Animated.Value(0));

  useEffect(() => {
    const showListener = Keyboard.addListener('keyboardDidShow', (e) => {
      Animated.timing(keyboardHeight, {
        toValue: e.endCoordinates.height,
        duration: 250,
        useNativeDriver: false,
      }).start();
    });
    const hideListener = Keyboard.addListener('keyboardDidHide', () => {
      Animated.timing(keyboardHeight, {
        toValue: 0,
        duration: 250,
        useNativeDriver: false,
      }).start();
    });

    return () => {
      showListener.remove();
      hideListener.remove();
    };
  }, []);

  return (
    <Animated.View style={[styles.modal, {
      transform: [{ translateY: keyboardHeight.interpolate({
        inputRange: [0, 300],
        outputRange: [0, -300],
        extrapolate: 'clamp'
      }) }]
    }]}>
      <TextInput placeholder="请输入内容" style={styles.input} />
    </Animated.View>
  );
};

const styles = StyleSheet.create({
  modal: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    padding: 16,
    backgroundColor: '#fff',
    borderTopLeftRadius: 16,
    borderTopRightRadius: 16,
  },
  input: {
    height: 40,
    borderColor: '#ccc',
    borderWidth: 1,
    borderRadius: 8,
    paddingHorizontal: 12,
  },
});

export default BottomModalInput;

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