Flutter Web登录页：能否通过键盘回车键触发登录按钮onPress函数？

完全可以实现，这里提供几种实用方案，核心是把登录逻辑抽离成独立函数，让按钮点击和回车触发复用同一逻辑：

方案1：密码输入框回车直接触发登录（推荐） #

通常用户输完密码后按回车登录是最符合直觉的交互，利用TextFormField的onFieldSubmitted回调即可实现：

首先定义通用的登录处理函数：

void _performLogin() {
  // 这里写你自定义登录按钮onPress里的逻辑
  // 比如校验身份证号、密码，调用登录接口等
  debugPrint('执行登录操作');
}

然后在密码输入框中配置回调：

TextFormField(
  decoration: const InputDecoration(labelText: '密码'),
  obscureText: true,
  // 设置键盘回车按钮为"完成"样式
  textInputAction: TextInputAction.done,
  onFieldSubmitted: (inputValue) {
    _performLogin();
  },
)

自定义登录按钮直接绑定这个函数：

CustomLoginButton(
  onPress: _performLogin,
  buttonText: '登录',
)

方案2：全局监听回车键触发登录 #

如果需要在任何输入框按下回车都触发登录（不推荐，交互不够友好），可以用RawKeyboardListener包裹页面内容：

final FocusNode _globalFocusNode = FocusNode();

@override
Widget build(BuildContext context) {
  return RawKeyboardListener(
    focusNode: _globalFocusNode,
    onKey: (RawKeyEvent event) {
      // 只监听回车键按下事件
      if (event is RawKeyDownEvent && event.logicalKey == LogicalKeyboardKey.enter) {
        _performLogin();
      }
    },
    child: Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          TextFormField(
            decoration: const InputDecoration(labelText: '身份证号'),
          ),
          TextFormField(
            decoration: const InputDecoration(labelText: '密码'),
            obscureText: true,
          ),
          CustomLoginButton(
            onPress: _performLogin,
            buttonText: '登录',
          ),
        ],
      ),
    ),
  );
}

方案3：回车切换输入框+最终触发登录 #

更友好的交互是：身份证号输入框按回车跳转到密码框，密码框按回车触发登录，结合FocusScope和onFieldSubmitted实现：

final FocusNode _passwordFocusNode = FocusNode();

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        TextFormField(
          decoration: const InputDecoration(labelText: '身份证号'),
          textInputAction: TextInputAction.next,
          onFieldSubmitted: (_) {
            // 切换焦点到密码输入框
            FocusScope.of(context).requestFocus(_passwordFocusNode);
          },
        ),
        TextFormField(
          decoration: const InputDecoration(labelText: '密码'),
          obscureText: true,
          focusNode: _passwordFocusNode,
          textInputAction: TextInputAction.done,
          onFieldSubmitted: (_) {
            _performLogin();
          },
        ),
        CustomLoginButton(
          onPress: _performLogin,
          buttonText: '登录',
        ),
      ],
    ),
  );
}

以上三种方案都能实现需求，推荐方案3，既符合用户操作习惯，又保证交互流畅。

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