Flutter移动端登录页TextField被键盘遮挡问题求助

API 探路者

2026-7-20

Flutter登录页TextField避免被键盘遮挡的非滚动解决方案

方案一：利用MediaQuery动态调整顶部间距

原代码中硬编码的SizedBox(height:770)无法适配键盘弹出场景，可通过MediaQuery.of(context).viewInsets.bottom实时获取键盘高度，动态计算顶部空白间距：

修改后的视图代码：

Widget build(BuildContext context) {
  final screenHeight = MediaQuery.of(context).size.height;
  final keyboardHeight = MediaQuery.of(context).viewInsets.bottom;
  // 计算顶部间距：屏幕总高减去输入框高度、边距，再减去键盘高度，确保间距不小于0
  final inputHeight = MediaQuery.of(context).size.height < 900 ? 45 : 60;
  final topSpacing = screenHeight - inputHeight - 20 - keyboardHeight;
  
  return Scaffold(
    body: Container(
      child: Column(
        children: [
          SizedBox(height: topSpacing > 0 ? topSpacing : 0),
          Input(label: 'Password', type: TextInputType.text)
        ],
      ),
    ),
  );
}

该方案通过动态调整顶部空白，确保TextField始终显示在键盘上方，同时保持页面不可滚动。

方案二：用Expanded替代固定高度SizedBox

放弃硬编码的顶部间距，改用Expanded让空白区域自动填充剩余空间，配合Scaffold默认的resizeToAvoidBottomInset: true（默认开启），键盘弹出时系统会自动调整body高度，Expanded收缩后TextField自然上移：

修改后的视图代码：

Widget build(BuildContext context) {
  return Scaffold(
    body: Container(
      child: Column(
        children: [
          Expanded(child: SizedBox()), // 自动填充顶部剩余空间
          Input(label: 'Password', type: TextInputType.text),
          SizedBox(height: 10), // 底部留边避免贴屏
        ],
      ),
    ),
  );
}

此方案更简洁，适配所有屏幕尺寸，无需手动计算高度，优先推荐使用。