Flutter点击自定义defultFormField文本框触发showTimePicker问题问询

你当前的自定义defultFormField组件虽然声明接收了onTap参数，但没有将该参数实际绑定到内部TextFormField的onTap回调上，内部onTap是空白实现，所以点击事件不会触发你传入的时间选择器逻辑。同时其他回调参数也存在未绑定、类型定义不严谨的问题。

第一步：修改自定义defultFormField组件代码 #

主要修改点：

• 将传入的onTap、onSubmit、valedate回调绑定到内部TextFormField的对应属性上
• 修正回调参数的类型定义，匹配Flutter原生参数要求
• 新增可选的readOnly参数，用于时间选择场景下禁止弹出系统键盘

Widget defultFormField({
  // 修正回调参数类型，匹配TextFormField原生要求
  required VoidCallback onTap,
  required ValueChanged<String> onSubmit,
  required TextEditingController controller,
  required String text,
  required IconData prefix,
  required FormFieldValidator<String> valedate,
  // 新增只读参数，用于不需要输入的选择场景
  bool readOnly = false,
}) =>
    TextFormField(
      controller: controller,
      readOnly: readOnly, // 绑定只读属性
      onTap: onTap, // 绑定传入的点击回调
      onFieldSubmitted: onSubmit, // 绑定提交回调
      validator: valedate, // 绑定校验回调
      decoration: InputDecoration(
        border: const OutlineInputBorder(),
        labelText: text,
        prefixIcon: Icon(prefix),
      ),
    );

第二步：修改调用代码 #

调用时传入readOnly: true避免弹出键盘，同时在showTimePicker的回调中处理选中的时间，写入输入框：

defultFormField(
  controller: timeController,
  readOnly: true, // 开启只读，禁止系统键盘弹出
  text: "选择时间",
  prefix: Icons.access_time,
  valedate: (value) {
    if(value?.isEmpty ?? true) {
      return "请选择时间";
    }
    return null;
  },
  onSubmit: (val) {},
  onTap: () {
    showTimePicker(
      useRootNavigator: true,
      context: context,
      initialTime: TimeOfDay.now(),
    ).then((value) {
      if(value != null) {
        // 将选中的时间格式化后写入输入框
        timeController.text = "${value.hour}:${value.minute.toString().padLeft(2, '0')}";
      }
    });
  },
)

完成以上修改后，点击文本框就会直接弹出时间选择器，选中时间后会自动填充到输入框中，不会弹出系统键盘。

内容的提问来源于stack exchange，提问作者Abdallah Y. Abu Asab