将控制器用作 TextEditingController(text:"Enter value") 时如何使 TextField 小部件可编辑?
How to make the TextField widget editable when using controller as TextEditingController(text:"Enter value")?
我一直在尝试让初始文本通过 controller:TextEditingController(text:"Enter DOB")
在 Flutter
TextField
小部件中传递 可编辑 ,但我可以找不到任何解决方案(暂时)。
我想在从 TextField
.
中的 showDatePicker
方法中选择日期后,使 selectedDate
(或初始文本)可编辑
所以我需要一些帮助。有办法吗??
以下是我的代码。我想让控制器中的文本可编辑。
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
作为状态管理方法。
我认为你必须将 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)
函数 return 必须 String
才能刷新您的状态。
已解决
我已经解决了我的问题上面的答案给了我一个想法。
我刚刚声明了一个 TextEditingController()..text="Enter DOB"
变量并将其传递给 showDatePicker(BuildContext context)
方法。
然后我从那里向 controller.text
提供了 selectedDate.toString().split(' ')[0]
的值。
还有被调用的 changeDOB(controller.text)
以 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.
}
}
我一直在尝试让初始文本通过 controller:TextEditingController(text:"Enter DOB")
在 Flutter
TextField
小部件中传递 可编辑 ,但我可以找不到任何解决方案(暂时)。
我想在从 TextField
.
showDatePicker
方法中选择日期后,使 selectedDate
(或初始文本)可编辑
所以我需要一些帮助。有办法吗??
以下是我的代码。我想让控制器中的文本可编辑。
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
作为状态管理方法。
我认为你必须将 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)
函数 return 必须 String
才能刷新您的状态。
已解决
我已经解决了我的问题上面的答案给了我一个想法。
我刚刚声明了一个
TextEditingController()..text="Enter DOB"
变量并将其传递给showDatePicker(BuildContext context)
方法。然后我从那里向
controller.text
提供了selectedDate.toString().split(' ')[0]
的值。还有被调用的
changeDOB(controller.text)
以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.
}
}