Flutter Windows虚拟键盘适配求助：自动弹出与界面挤压设置

一、非平板模式下TextField点击不弹出虚拟键盘 #

• 检查系统设置：打开Windows设置 > 个性化 > 任务栏，开启在桌面模式下显示触摸键盘选项
• 手动唤起键盘：在TextField的onTap事件中调用系统API触发键盘，示例代码：

TextField(
  onTap: () async {
    await SystemChannels.textInput.invokeMethod('TextInput.show');
  },
)

• 升级Flutter版本：部分旧版本存在桌面模式键盘唤起bug，建议升级至3.10及以上稳定版

二、平板模式下避免键盘覆盖底部TextField #

Flutter Windows默认不会像移动端自动挤压界面，需手动处理键盘高度变化，以下是两种可行方案：

方案1：通过MediaQuery监听键盘高度 #

利用MediaQuery.of(context).viewInsets.bottom获取实时键盘高度，动态设置界面底部内边距：

Scaffold(
  body: LayoutBuilder(
    builder: (context, constraints) {
      final keyboardHeight = MediaQuery.of(context).viewInsets.bottom;
      return SingleChildScrollView(
        child: Padding(
          padding: EdgeInsets.only(bottom: keyboardHeight),
          child: Column(
            children: [
              // 其他界面元素
              TextField(decoration: InputDecoration(labelText: 'Konyha1')),
              TextField(decoration: InputDecoration(labelText: 'Konyha2')),
              TextField(decoration: InputDecoration(labelText: 'Konyha3')),
            ],
          ),
        ),
      );
    },
  ),
)

方案2：使用键盘监听插件 #

1. 在pubspec.yaml添加依赖：

dependencies:
  flutter_keyboard_visibility: ^6.0.0

2. 监听键盘状态并调整界面：

import 'package:flutter_keyboard_visibility/flutter_keyboard_visibility.dart';

class MyPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return KeyboardVisibilityBuilder(
      builder: (context, isKeyboardVisible) {
        final bottomPadding = isKeyboardVisible ? 200.0 : 0.0; // 根据实际键盘高度调整数值
        return Scaffold(
          body: SingleChildScrollView(
            child: Padding(
              padding: EdgeInsets.only(bottom: bottomPadding),
              child: Column(
                children: [
                  // 其他界面元素
                  TextField(decoration: InputDecoration(labelText: 'Konyha1')),
                  TextField(decoration: InputDecoration(labelText: 'Konyha2')),
                  TextField(decoration: InputDecoration(labelText: 'Konyha3')),
                ],
              ),
            ),
          ),
        );
      },
    );
  }
}

额外优化：焦点自动滚动 #

给底部TextField绑定FocusNode，监听焦点变化时自动滚动到可视区域：

final FocusNode _konyha3Focus = FocusNode();

@override
void initState() {
  super.initState();
  _konyha3Focus.addListener(() {
    if (_konyha3Focus.hasFocus) {
      WidgetsBinding.instance.addPostFrameCallback((_) {
        Scrollable.ensureVisible(_konyha3Focus.context!);
      });
    }
  });
}

// 调用示例
TextField(
  focusNode: _konyha3Focus,
  decoration: InputDecoration(labelText: 'Konyha3'),
)

内容的提问来源于stack exchange，提问作者Benedek Körtvélyesi