flutter - Flutter 中的 TextField 状态管理
问题描述
我正在尝试创建一个笔记应用程序。我正在使用带有前缀图标的文本字段,我的问题是,如果用户在文本字段中键入内容然后选择日期,则文本字段输入将被清除。有什么建议么 ??提前致谢 !这是完整的代码...
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()),
);
},
),
],
)
],
),
),
),
);
}
}
我知道当我在日期选择器上设置状态时我做错了......也是错误的代码......
解决方案
请检查此代码。您对这两项工作都使用相同的文本字段,最好使用不同的文本字段。
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,
)
推荐阅读
- cypress - 赛普拉斯无法断言新窗口 URL
- php - 为“排序依据”组合两列
- latex - 使用 eqnarray 在乳胶中更改方程对齐
- html - 边距底部未应用于某些图像
- python - 如何使字符串中的单个单词具有某种颜色
- flutter - 在颤动中停止在 DraggableScrollableSheet 中滚动
- amazon-web-services - 亚马逊sqs fifo队列中的飞行模式下如何有超过10条具有相同组ID的消息?
- amazon-s3 - Apache flink 以 S3 作为源,S3 作为接收器
- reactjs - 如何在不使用节点的情况下运行反应应用程序?
- eclipse - Eclipse Kotlin 插件未编译 Kotlin 类