Как отключить текстовое поле в соответствии с условиями?

#forms #flutter #dart #textformfield #flutter-textformfield

Вопрос:

У меня есть 2 поля текстовой формы, первое-это указатель даты, второе-классическое поле текстовой формы, в котором вы можете ввести количество часов, потраченных на определенную задачу, если вы введете»2″ в это поле и отправите форму, она сохранится в базе данных как 2 часа, потраченные на эту конкретную задачу в выбранный день из указателя даты выше :

введите описание изображения здесь

Поскольку у вас уже могут быть часы, сохраненные в базе данных для определенного дня и задачи, я хочу, чтобы, когда пользователь выбирает дату в окне выбора даты:

Если на эту дату уже сохранены часы :

  • количество часов отображается во втором текстовом поле
  • второе текстовое поле отключено
  • кнопка отправить отключена

Если на эту дату не сохранено никаких часов :

  • классическая функция

Вот код моей формы :

 Form(
                  key: UniqueKey(),
                  child: Column(
                    children: [
                      Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Padding(
                            padding: EdgeInsets.only(right: 20),
                            child: 
                            InkWell(
                              onTap: () {
                              _selectDate(context);
                              },
                              child: Icon(BeoticIcons.calendar, size: 30),
                            ),
                          ),
                          InkWell(
                            onTap: () {
                              _selectDate(context);
                            },
                            child: Container(
                              width: 210,
                              height: 40,
                              child: TextFormField(
                                textAlign: TextAlign.center,
                                enabled: false,
                                keyboardType: TextInputType.text,
                                controller: _dateController,
                                decoration: InputDecoration(
                                  contentPadding: EdgeInsets.zero,
                                  hintText: DateFormat('dd/MM/yyyy').format(DateTime.now()),
                                  filled: true,
                                  fillColor: Colors.white
                                ),
                              ),
                            ),
                          ),
                        ],
                      ),
                      SizedBox(
                        height: 20
                      ),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Padding(
                            padding: EdgeInsets.only(right:20),
                            child: Icon(BeoticIcons.clock, size: 30),
                          ),
                          Container(
                            //margin: EdgeInsets.only(left: 30),
                            width: 210,
                            height: 40,
                            child: TextFormField(
                              controller: _timeController,
                              textAlign: TextAlign.center,
                              enabled: true,
                              decoration: InputDecoration(
                                hintText: "0 h",
                                contentPadding: EdgeInsets.zero,
                                filled: true,
                                fillColor: Colors.white
                              ),
                            ),
                          )
                        ],
                      ),
                      SizedBox(
                        height: 20
                      ),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.end,
                        children: [
                          Padding(
                            padding: EdgeInsets.only(right: 35),
                            child: ElevatedButton(
                              onPressed: () async {postTimes(await convertDate(selectedDate), convertTime(_timeController.text));},
                              child: Text("Enregistrer")
                            ),
                          )
                        ],
                      )
                    ],
                  ),
                ),
 

На данный момент я понятия не имею, как поставить условие в зависимости от внешних данных для включенного атрибута поля Textform и как изменить текстовое поле Textform в зависимости от этих данных,

Любая помощь будет приветствоваться 🙂

Ответ №1:

Есть два критерия, которым мы должны соответствовать,

  • включить точку входа
  • отключить точку входа

Пока мы представляем пользовательский интерфейс, нам нужно извлечь данные из хранилища перед показом DatePicker . Я бы предпочел продолжить . initState Было бы лучше отключить событие щелчка и сделать hour: TextField readOnly на первом месте.

Внутри stateClass у нас есть переменная(предпочитаемая с возможностью обнуления) для получения выбранной даты DatePicker Dialog . Или мы можем использовать другой bool _isNewEntry = false .

После закрытия datePicker используйте свою логику(просто сравнивая дд/ММ/гггг), чтобы установить _isNewEntry true или false и установить _timeController.text =MatchModelHour внутри setState() .

Текстовое <readOnly> поле будет

 TextField(
 readOnly: _isNewEntry,
 controller: _timeController,
)
 

Для кнопки вы можете перейти null к отключению функциональности или просто к какой-то логике, такой как отображение всплывающих сообщений или закусочной.

 onPressed: _isNewEntry () async {...}: null,
 

Но в некоторых случаях вам может не понравиться отключенный стиль и вы захотите использовать другой стиль, а затем использовать другую функцию, например

 onPressed: _isNewEntry () async {...}: (){ //disable entry point snackbar etc},