我只想在输入一些文本时将标签文本移到输入文本字段的顶部。当前,当输入文本字段成为焦点时,它在顶部。
Widget nameField() {
return TextFormField(
keyboardType: TextInputType.text,
autofocus: false,
textAlign: TextAlign.start,
textInputAction: TextInputAction.done,
controller: nameTextEditingController,
style: TextStyle(
color: Colors.white, fontSize: 18, fontWeight: FontWeight.w500),
decoration: const InputDecoration(
contentPadding: EdgeInsets.symmetric(vertical: 15),
labelText: Strings.user_info_page_name_placeholder,
labelStyle: TextStyle(
color: Colors.grey, fontSize: 18, fontWeight: FontWeight.w500),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.transparent, width: 1)),
),
);
}
答案 0 :(得分:2)
我可以想到两种方法。这里的技巧是使用hintText:
首先:使用onChanged:
方法。
代码:
class MyClass extends StatefulWidget {
@override
_MyClassState createState() => new _MyClassState();
}
class _MyClassState extends State<MyClass> with SingleTickerProviderStateMixin {
TextEditingController nameTextEditingController = TextEditingController();
String _labelText;
@override
void initState() {
super.initState();
// nameTextEditingController.addListener(_hasStartedTyping);
}
// void _hasStartedTyping() {
// setState(() {
// if (nameTextEditingController.text.isNotEmpty) {
// _labelText = 'Name';
// } else {
// _labelText = null;
// }
// });
// }
@override
Widget build(BuildContext context) {
return Scaffold(
body: Padding(
padding: EdgeInsets.symmetric(horizontal: 25, vertical: 30),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
TextFormField(
keyboardType: TextInputType.text,
autofocus: false,
textAlign: TextAlign.start,
onChanged: (v){
setState(() {
if(v.isNotEmpty){
_labelText = 'Name';
}else{
_labelText = null;
}
});
},
textInputAction: TextInputAction.done,
controller: nameTextEditingController,
style: TextStyle(
color: Colors.black87,
fontSize: 18,
fontWeight: FontWeight.w500),
decoration: InputDecoration(
contentPadding: EdgeInsets.symmetric(vertical: 15),
labelText: _labelText,
hintText: 'Name',
hintStyle: TextStyle(
color: Colors.grey,
fontSize: 18,
fontWeight: FontWeight.w500),
labelStyle: TextStyle(
color: Colors.grey,
fontSize: 18,
fontWeight: FontWeight.w500),
focusedBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.transparent, width: 1)),
),
),
],
)),
);
}
}
第二:使用TextEditingController.addListener()
方法。
代码:
class MyClass extends StatefulWidget {
@override
_MyClassState createState() => new _MyClassState();
}
class _MyClassState extends State<MyClass> with SingleTickerProviderStateMixin {
TextEditingController nameTextEditingController = TextEditingController();
String _labelText;
@override
void initState() {
super.initState();
nameTextEditingController.addListener(_hasStartedTyping);
}
void _hasStartedTyping() {
setState(() {
if (nameTextEditingController.text.isNotEmpty) {
_labelText = 'Name';
} else {
_labelText = null;
}
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Padding(
padding: EdgeInsets.symmetric(horizontal: 25, vertical: 30),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
TextFormField(
keyboardType: TextInputType.text,
autofocus: false,
textAlign: TextAlign.start,
// onChanged: (v){
// setState(() {
// if(v.isNotEmpty){
// _labelText = 'Name';
// }else{
// _labelText = null;
// }
// });
//
// },
textInputAction: TextInputAction.done,
controller: nameTextEditingController,
style: TextStyle(
color: Colors.black87,
fontSize: 18,
fontWeight: FontWeight.w500),
decoration: InputDecoration(
contentPadding: EdgeInsets.symmetric(vertical: 15),
labelText: _labelText,
hintText: 'Name',
hintStyle: TextStyle(
color: Colors.grey,
fontSize: 18,
fontWeight: FontWeight.w500),
labelStyle: TextStyle(
color: Colors.grey,
fontSize: 18,
fontWeight: FontWeight.w500),
focusedBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.transparent, width: 1)),
),
),
],
)),
);
}
}