Dart中关闭键盘时立即打印ModalBottomSheet内TextFormField的值

要实现关闭键盘时打印TextFormField的输入值，或点击DropDownMultiSelect前打印该值，可以通过以下步骤完成：

核心思路 #

• 用TextEditingController管理输入内容，随时获取最新值
• 通过FocusNode监听TextFormField的焦点变化，焦点丢失时（关闭键盘触发）执行打印
• 给DropDownMultiSelect添加点击回调，在弹出选项前打印当前输入值

完整代码示例 #

import 'package:flutter/material.dart';
// 若使用第三方DropDownMultiSelect组件，需导入对应包

class BottomSheetDemo extends StatefulWidget {
  const BottomSheetDemo({super.key});

  @override
  State<BottomSheetDemo> createState() => _BottomSheetDemoState();
}

class _BottomSheetDemoState extends State<BottomSheetDemo> {
  final TextEditingController _inputController = TextEditingController();
  final FocusNode _inputFocusNode = FocusNode();

  @override
  void initState() {
    super.initState();
    // 监听焦点变化：输入框失去焦点时（比如关闭键盘）打印值
    _inputFocusNode.addListener(() {
      if (!_inputFocusNode.hasFocus) {
        _printInputValue();
      }
    });
  }

  // 封装打印逻辑，避免重复代码
  void _printInputValue() {
    final inputValue = _inputController.text.trim();
    if (inputValue.isNotEmpty) {
      print('当前输入值：$inputValue');
    }
  }

  @override
  void dispose() {
    // 销毁资源，避免内存泄漏
    _inputController.dispose();
    _inputFocusNode.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('底部弹窗示例')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            showModalBottomSheet(
              context: context,
              builder: (context) {
                return Padding(
                  padding: EdgeInsets.only(
                    bottom: MediaQuery.of(context).viewInsets.bottom,
                  ),
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      // 带焦点监听的输入框
                      TextFormField(
                        controller: _inputController,
                        focusNode: _inputFocusNode,
                        keyboardType: TextInputType.number,
                        decoration: const InputDecoration(
                          labelText: '输入数值',
                          padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
                        ),
                      ),
                      // 点击前打印输入值的多选下拉框
                      DropDownMultiSelect(
                        items: const ['选项A', '选项B', '选项C'],
                        selectedValues: const [],
                        onChanged: (selected) {},
                        // 若组件无onTap，可根据组件文档替换为触发弹出的对应回调
                        onTap: () {
                          _printInputValue();
                        },
                        hintText: '选择选项',
                      ),
                      const SizedBox(height: 16),
                    ],
                  ),
                );
              },
            );
          },
          child: const Text('打开底部弹窗'),
        ),
      ),
    );
  }
}

关键说明 #

1. 焦点监听逻辑：关闭键盘时，TextFormField会自动失去焦点，FocusNode的监听器会立即触发，执行打印操作。
2. 下拉框处理：如果你的DropDownMultiSelect组件没有onTap回调，可查看组件文档找到触发弹出的对应事件（如onPressed），在该事件中先调用打印方法。
3. 资源清理：必须在dispose方法中销毁TextEditingController和FocusNode，防止内存泄漏。

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