当使用控制器作为文本编辑控制器(文本："Enter value")时，如何使文本字段小部件可编辑？

Question

我一直在尝试通过controller:TextEditingController(text:"Enter DOB")在Flutter可编辑的TextField小部件内的初始文本，但我暂时找不到解决办法。

我想使selectedDate(或初始文本)在从TextField中的showDatePicker方法中选择日期后可编辑。

所以我需要一些帮助。有办法吗?下面是我的代码。我想让控制器中的文本是可编辑的

     TextField(
              // This controller will show the initial value as 'Enter DOB'
              // and when the Date is selected from the showDatePicker it will
              // get updated.
              controller: TextEditingController(
                // the text: property will check if the current value is null or not.
                // if null it will show the "Enter your DOB" text, else the selected## Heading ##Date
                // will get updated.
                text: validator.selectedDate == null
                    ? "Enter your DOB"
                    : "${validator.selectedDate}".split(' ')[0],
              ),
              decoration: InputDecoration(
                suffixIcon: IconButton(
                  icon: Icon(Icons.calendar_today_rounded),
                  onPressed: () {
                    validator.selectDate(context);
                  },
                ),
                labelText: "yyyy-mm-dd",
              ),
              onChanged: (String value) {
                validator.changeDOB(value);
              },
            );

,

• selectedDate是DateTime类型的变量，初始值为null。

• selectDate(BuildContext context)是showDatePicker(BuildContext context)方法的一个方法。

• changeDOB(String value)是一个将selectedDate的值更新为TextField的方法。

注意: 我使用Provider作为状态管理方法。

Answer 1

我认为你必须将TextEditingController作为局部变量，然后将其更改为setState()

是这样的:

import 'package:flutter/material.dart';
class DateTimeExample extends StatefulWidget {
  @override
  _DateTimeExampleState createState() => _DateTimeExampleState();
}
class _DateTimeExampleState extends State<DateTimeExample> {
  TextEditingController _dobController; // Local variable to store TextFiled text
  @override
  void initState() {
    // Initialize TextEditingController object with default text.
    _dobController = TextEditingController(text: "Enter your DOB: ");
    super.initState();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold( 
      body:Container(
        child: Center(
          child: TextField(
            controller: _dobController,
            decoration: InputDecoration(
              suffixIcon: IconButton(
                icon: Icon(Icons.calendar_today_rounded),
                onPressed: () {
                  String selectedDate=  validator.selectDate(context);
                  setState(() {
                  _dobController.text = selectedDate; // Change the text and refersh UI
                  });
                },
              ),
              labelText: "YYYY-MM-DD",
            ),
            onChanged: (value) {
              validator.changeDOB(value);
            },
          ),
        ),
      ),
    );
  }
}

注意:你的validator.selecteDate(Context)函数必须返回一个String，这样它才能刷新你的状态。

Answer 2

SOLVED

我已经解决了我的问题，上面的答案给了我一个想法去做。

• 我刚刚声明了一个TextEditingController()..text="Enter DOB"变量，并将其传递给showDatePicker(BuildContext context)方法。

• 从那里我给controller.text输入selectedDate.toString().split(' ')[0]的值。

• 以及以controller.text为参数的changeDOB(controller.text)。

• 我的代码如下:

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
class MyClass with ChangeNotifier {
  // passing the initial text to the textField through controller.
  var controller = TextEditingController()..text = "Enter DOB";
  DateTime selectedDate; // initial value = null;
  selectDate(BuildContext context) async {
    var picked = await showDatePicker(
      context: context,
      initialDate: DateTime.now(),
      firstDate: DateTime(1800),
      lastDate: DateTime.now(),
    );
    if (picked != null && picked != selectedDate) {
      selectedDate = picked;
      // passing the selectedDate to the controller.
      controller.text = selectedDate.toString().split(' ')[0];
      changeDOB(controller.text);
    }
    notifyListeners();
  }
   void changeDOB(String value){
     //TODO: Your validation logic here.
  }
}