Flutter 中的 TextField 状态管理答案

【问题标题】：TextField State Management in FlutterFlutter 中的 TextField 状态管理
【发布时间】：2020-12-29 19:55:15
【问题描述】：

我正在尝试创建一个笔记应用程序。我正在使用带有前缀图标的文本字段，我的问题是，如果用户在文本字段中键入内容然后选择日期，则文本字段输入将被清除。有什么建议？？提前致谢！这是完整的代码...

 class AddTask extends StatefulWidget {
 @override
  _AddTaskState createState() => _AddTaskState();
}
class _AddTaskState extends State<AddTask> {
  DateTime daytime;

  @override
  Widget build(BuildContext context) {
    String newNoteTitle;
    String newNoteText;
    String newNoteId = DateTime.now().toIso8601String();

    TextEditingController titleController = TextEditingController();
    TextEditingController commentController = TextEditingController();

    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          automaticallyImplyLeading: false,
          centerTitle: true,
          backgroundColor: Colors.black12,
          title: Text(
            'Add a note ',
            style: TextStyle(
                fontFamily: 'Volkhov',
                color: Colors.white,
                fontWeight: FontWeight.w400,
                fontSize: 25.0),
            textAlign: TextAlign.center,
          ),
        ),
        backgroundColor: Color(0xff212121),
        body: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              // SizedBox(
              //   height: 80,
              // ),
              Container(
                width: 400,
                height: 350,
                child: Card(
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.all(
                      Radius.circular(20),
                    ),
                  ),
                  margin: EdgeInsets.fromLTRB(30, 20, 30, 20),
                  color: Colors.white12,
                  child: Column(
                    children: [
                      Padding(
                        padding: EdgeInsets.all(10),
                        child: TextField(
                          maxLength: 20,
                          maxLines: null,
                          textAlign: TextAlign.start,
                          decoration: InputDecoration(
                            prefixIcon: GestureDetector(
                              onTap: () {
                                showDatePicker(
                                  context: context,
                                  initialDate: daytime == null
                                      ? DateTime.now()
                                      : daytime,
                                  firstDate: DateTime(1970),
                                  lastDate: DateTime(2100),
                                ).then((date) {
                                  setState(() {
                                    daytime = date;
                                  });
                                });
                              },
                              child: Icon(
                                Icons.date_range,
                                color: Colors.deepPurple,
                              ),
                            ),
                            enabledBorder: OutlineInputBorder(
                              borderSide: BorderSide(color: Colors.amber),
                              borderRadius: BorderRadius.all(
                                Radius.circular(10),
                              ),
                            ),
                            hintText:
                                'Enter title or press the icon to select a date',
                            hintStyle: TextStyle(color: Colors.white),
                            focusedBorder: OutlineInputBorder(
                              borderSide: BorderSide(color: Colors.deepPurple),
                              borderRadius: BorderRadius.all(
                                Radius.circular(10),
                              ),
                            ),
                          ),
                          style: TextStyle(
                            fontSize: 11.0,
                            color: Colors.white,
                            // fontStyle: FontStyle.italic,
                          ),
                          controller: titleController,
                          // onChanged: (newtitle) {
                          //   newNoteText = newtitle;
                          // },
                        ),
                      ),
                      SizedBox(
                        height: 30,
                      ),
                      Padding(
                        padding: EdgeInsets.all(10),
                        child: TextField(
                          maxLines: null,
                          maxLength: 500,
                          textAlign: TextAlign.start,
                          decoration: InputDecoration(
                            enabledBorder: UnderlineInputBorder(
                              borderSide: BorderSide(color: Colors.amber),
                            ),
                            hintText: 'Comments',
                            hintStyle: TextStyle(color: Colors.grey),
                            focusedBorder: UnderlineInputBorder(
                              borderSide: BorderSide(color: Colors.deepPurple),
                            ),
                          ),
                          style: TextStyle(
                            fontSize: 15.0,
                            color: Colors.white,
                            // fontStyle: FontStyle.italic,
                          ),
                          controller: commentController,
                          // onChanged: (newText) {
                          //   newNoteText = newText;
                          // },
                        ),
                      ),
                    ],
                  ),
                ),
              ),
              SizedBox(height: 20),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  RaisedButton(
                    elevation: 20,
                    onPressed: () {
                      Navigator.pop(context);
                    },
                    color: Colors.amber,
                    child: Icon(
                      Icons.arrow_back,
                      color: Colors.black,
                    ),
                  ),
                  SizedBox(
                    width: 20,
                  ),
                  RaisedButton(
                    elevation: 25,
                    child: Text(
                      'Save',
                      style: TextStyle(color: Colors.black),
                    ),
                    color: Colors.amber,
                    onPressed: () {
                      if (titleController.text.isEmpty && daytime == null) {
                        newNoteTitle = 'No title';
                      } else if (titleController.text.isEmpty &&
                          daytime != null) {
                        newNoteTitle = DateFormat('yyy/MM/dd').format(daytime);
                      } else if (titleController.text != null &&
                          daytime == null) {
                        newNoteTitle = titleController.text;
                      } else {
                        newNoteTitle = titleController.text +
                            ' - ' +
                            DateFormat('yyy/MM/dd').format(daytime);
                      } 
                      commentController.text.isEmpty
                          ? newNoteText = 'No comments'
                          : newNoteText = commentController.text;
                      // Provider.of<Notes>(context, listen: false).addNote(
                      
                      DBHelper.insert(
                        'user_notes',
                        {
                          'title': newNoteTitle,
                          'text': newNoteText,
                          'id': newNoteId
                        },
                      );
                      Navigator.pushReplacement(
                        context,
                        MaterialPageRoute(builder: (context) => MainScreen()),
                      );
                    },
                  ),
                ],
              )
            ],
          ),
        ),
      ),
    );
  }
}

我知道当我在日期选择器上设置状态时我做错了...同样是错误代码...

【问题讨论】：

能否分享完整代码
你得到解决方案了吗？
我正在努力...谢谢！如果我成功了，我会告诉你的

标签： flutter state textfield

【解决方案1】：

请检查此代码。您对这两项工作都使用相同的文本字段，最好使用不同的文本字段。

    TextField(
        maxLength: 20,
        maxLines: null,
        textAlign: TextAlign.start,
        decoration: InputDecoration(
          prefixIcon: GestureDetector(
            onTap: () {
              showDatePicker(
                context: context,
                initialDate: daytime == null ? DateTime.now() : daytime,
                firstDate: DateTime(1970),
                lastDate: DateTime(2100),
              ).then((date) {
                setState(() {
                  daytime = date;
                  titleController.text =
                      daytime.toString() + titleController.text;
                });
              });
            },
            child: Icon(
              Icons.date_range,
              color: Colors.deepPurple,
            ),
          ),
          enabledBorder: OutlineInputBorder(
            borderSide: BorderSide(color: Colors.amber),
            borderRadius: BorderRadius.all(
              Radius.circular(10),
            ),
          ),
          hintText: 'Enter title or press the icon to select a date',
          hintStyle: TextStyle(color: Colors.red),
          focusedBorder: OutlineInputBorder(
            borderSide: BorderSide(color: Colors.deepPurple),
            borderRadius: BorderRadius.all(
              Radius.circular(10),
            ),
          ),
        ),
        style: TextStyle(
          fontSize: 11.0,
          color: Colors.red,
          // fontStyle: FontStyle.italic,
        ),
        controller: titleController,
      )

【讨论】：

【解决方案2】：

不确定您在代码中到底做错了什么，但您可以在外部设置文本以维护变量并将值分配给 titleController.text

 setState(() {
                daytime = date;
                titleController.text  = 'Text Message';
           });

【讨论】：

【解决方案3】：

我就是这样使用控制器的，下面试试

final titleController = TextEditingController();
final commentController = TextEditingController();

【讨论】：

【解决方案4】：

尝试在小部件构建之外定义您的控制器，因为当 setState 工作时，它会不断重建您的控制器。

TextEditingController titleController = TextEditingController();
TextEditingController commentController = TextEditingController();
Widget build(BuildContext context) {}

【讨论】：