dart Flutter日期和时间选择器文本表单字段onTap()清除其他文本表单字段内容

blmhpbnm  于 2023-11-14  发布在  Flutter
关注(0)|答案(2)|浏览(130)

我正在做Flutter应用程序,我有一个表单来添加新任务(title - description - deadline datetime)在deadline TextFormField中,我将其设置为readOnly,并将onTap()设置为显示日期选择器,然后显示时间选择器,然后将其格式化并将其放入TextFormField中,但问题是,当我输入标题和描述,然后我点击截止日期TextFormField选择日期和时间,水龙头清除我在标题和描述TextFormFields中键入的内容,这是代码

class AddTaskFormWidget extends StatelessWidget {
  AddTaskFormWidget({Key? key}) : super(key: key);

  static final GlobalKey<FormState> _formKey = GlobalKey<FormState>();

  final TextEditingController titleController = TextEditingController();
  final TextEditingController descriptionController = TextEditingController();
  final TextEditingController deadlineController = TextEditingController();
  
  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Column(
        children: [
          TextFormField(
            controller: titleController,
            decoration: const InputDecoration(
              label: Text('Task Title'),
            ),
            validator: (val) {
              if (!val!.isValidTitle) {
                return 'Please enter valid title';
              }

              return null;
            },
          ),
          TextFormField(
            controller: descriptionController,
            decoration: const InputDecoration(
              label: Text('Task Description'),
            ),
            validator: (val) {
              if (!val!.isValidDescription) {
                return 'Please enter valid description';
              }

              return null;
            },
          ),
          TextFormField(
            readOnly: true,
            onTap: () async {
              DateTime? deadlineDate = await showDatePicker(
                context: context,
                initialDate: DateTime.now(),
                firstDate: DateTime.now(),
                lastDate: DateTime(2100),
              );

              if (deadlineDate == null) return;

              TimeOfDay? deadlineTime = await showTimePicker(
                context: context,
                initialTime: TimeOfDay(
                  hour: 12,
                  minute: 0,
                ),
              );

              if (deadlineTime == null) return;

              final DateTime deadlineDateTime = DateTime(
                deadlineDate.year,
                deadlineDate.month,
                deadlineDate.day,
                deadlineTime.hour,
                deadlineTime.minute,
              );

              deadlineController.text = DateFormat('dd-MM-yyyy hh:mm').format(deadlineDateTime).toString();
            },
            controller: deadlineController,
            decoration: const InputDecoration(
              label: Text('Task Deadline'),
            ),
            validator: (val) {
              if (val!.isEmpty) {
                return 'Please enter deadline';
              }

              return null;
            },
          ),
          ElevatedButton(
            onPressed: () {
              if (_formKey.currentState!.validate()) {
                Navigator.pop(context);
              }
            },
            child: const Text('Submit'),
          ),
        ],
      ),
    );
  }
}

字符串

pinkon5k

pinkon5k1#

似乎没有你在问题中提到的任何问题。它在日期和时间TextFormField的Tap上工作正常。问题通常发生在我们在构建方法中声明TextEditingController时。但这里一切都很好。
如果你提供更多的信息,我可以帮助你。
Output of the code you send

watbbzwu

watbbzwu2#

我面临的问题是由于这样一个事实,当我打开日期和时间选择器对话框时,我失去了对其他文本表单字段的关注,这会触发它们的验证并清除它们的值。
我发现要解决这个问题,可以使用FocusNode类来管理文本表单字段的焦点

final titleFocusNode = FocusNode();
final descriptionFocusNode = FocusNode();
final deadlineFocusNode = FocusNode();

@override
void dispose() {
  titleController.dispose();
  descriptionController.dispose();
  deadlineController.dispose();
  titleFocusNode.dispose();
  descriptionFocusNode.dispose();
  deadlineFocusNode.dispose();
  super.dispose();
}

字符串

相关问题