实现TextField说简单也简单，说有坑，坑也不小，下面从易到难介绍一下使用
1.最简单的就是无参数调用构造方法：
TextField()
2.光有输入框还不行，还得获取其中的内容，所以需要传递controller：
-
import 'package:flutter/material.dart'; -
class TextFieldPage extends StatelessWidget { -
Widget buildTextField(TextEditingController controller) { -
return TextField( -
controller: controller, -
); -
} -
@override -
Widget build(BuildContext context) { -
final controller = TextEditingController(); -
controller.addListener(() { -
print('input ${controller.text}'); -
}); -
return Scaffold( -
appBar: AppBar( -
title: Text('TextField'), -
), -
body: Padding( -
padding: const EdgeInsets.all(20.0), -
child: buildTextField(controller), -
), -
); -
} -
}
我通过给controller添加通知来获取TextField的值，这种使用场景不一定合适，更多的时候是在点击按钮的时候直接读取controller.text的值
3.另外TextFiled还有一下小的属性：
-
import 'package:flutter/material.dart'; -
import 'package:flutter/services.dart'; -
class TextFieldPage extends StatelessWidget { -
Widget buildTextField(TextEditingController controller) { -
return TextField( -
controller: controller, -
maxLength: 30,//最大长度，设置此项会让TextField右下角有一个输入数量的统计字符串 -
maxLines: 1,//最大行数 -
autocorrect: true,//是否自动更正 -
autofocus: true,//是否自动对焦 -
obscureText: true,//是否是密码 -
textAlign: TextAlign.center,//文本对齐方式 -
style: TextStyle(fontSize: 30.0, color: Colors.blue),//输入文本的样式 -
inputFormatters: [WhitelistingTextInputFormatter.digitsOnly],//允许的输入格式 -
onChanged: (text) {//内容改变的回调 -
print('change $text'); -
}, -
onSubmitted: (text) {//内容提交(按回车)的回调 -
print('submit $text'); -
}, -
enabled: true,//是否禁用 -
); -
} -
@override -
Widget build(BuildContext context) { -
final controller = TextEditingController(); -
controller.addListener(() { -
print('input ${controller.text}'); -
}); -
return Scaffold( -
appBar: AppBar( -
title: Text('TextField'), -
), -
body: Padding( -
padding: const EdgeInsets.all(20.0), -
child: buildTextField(controller), -
), -
); -
} -
}
4.接着我还能显示placeholder
decoration可以给TextField添加装饰
-
TextField( -
decoration: -
InputDecoration(fillColor: Colors.blue.shade100, filled: true, labelText: 'Hello'), -
);
fillColor设置填充颜色，labelText设置标签文字，这个标签在没有输入的时候是占满输入框的，当输入聚焦以后，就会缩小到输入框左上角：
-
TextField( -
decoration: InputDecoration( -
fillColor: Colors.blue.shade100, filled: true, hintText: 'Hello', errorText: 'error'), -
);
hintText就是普通的placeholder，输入后就不显示了,errorText是错误提示
5.还能显示一些别的装饰
-
import 'package:flutter/material.dart'; -
class TextFieldPage extends StatelessWidget { -
Widget buildTextField() { -
return TextField( -
decoration: InputDecoration( -
fillColor: Colors.blue.shade100, -
filled: true, -
helperText: 'help', -
prefixIcon: Icon(Icons.local_airport), -
suffixText: 'airport'), -
); -
} -
@override -
Widget build(BuildContext context) { -
return Scaffold( -
appBar: AppBar( -
title: Text('TextField'), -
), -
body: Padding( -
padding: const EdgeInsets.all(20.0), -
child: buildTextField(), -
), -
); -
} -
}
6.这些还不过瘾，我不喜欢这个安卓风格的下面的装饰线，我想变成圆角矩形的边框
-
import 'package:flutter/material.dart'; -
class TextFieldPage extends StatelessWidget { -
Widget buildTextField() { -
return TextField( -
decoration: InputDecoration( -
contentPadding: EdgeInsets.all(10.0), -
border: OutlineInputBorder( -
borderRadius: BorderRadius.circular(15.0), -
// borderSide: BorderSide(color: Colors.red, width: 3.0, style: BorderStyle.solid)//没什么卵效果 -
)), -
); -
} -
@override -
Widget build(BuildContext context) { -
return Scaffold( -
appBar: AppBar( -
title: Text('TextField'), -
), -
body: Container( -
color: Colors.blue.shade100, -
child: Padding( -
padding: const EdgeInsets.all(30.0), -
child: buildTextField(), -
), -
), -
); -
} -
}
7.改变装饰线颜色
无论是下面的装饰线，还是矩形边框装饰线，对焦后显示的颜色，都是主题颜色的primaryColor，失去焦点以后就是黑色，这显然不能满足自定义的需求，但是通过各种努力发现，改变边框颜色很困难，最后发现了这个答案：https://stackoverflow.com/questions/49600139/how-to-change-textfield-underline-color
所以正确的设置边框颜色的方式是这样的：
-
import 'package:flutter/material.dart'; -
class TextFieldPage extends StatelessWidget { -
Widget buildTextField() { -
return Theme( -
data: new ThemeData(primaryColor: Colors.red, hintColor: Colors.blue), -
child: TextField( -
decoration: InputDecoration( -
contentPadding: EdgeInsets.all(10.0), -
border: OutlineInputBorder( -
borderRadius: BorderRadius.circular(15.0), -
// borderSide: BorderSide(color: Colors.red, width: 3.0, style: BorderStyle.solid)//没什么卵效果 -
)), -
), -
); -
} -
@override -
Widget build(BuildContext context) { -
return Scaffold( -
appBar: AppBar( -
title: Text('TextField'), -
), -
body: Padding( -
padding: const EdgeInsets.all(30.0), -
child: buildTextField(), -
), -
); -
} -
}
8.改变边框的粗细
这些TextField的decoration彻底不能满足要求了，需要重构成这种方式：
-
import 'package:flutter/material.dart'; -
class TextFieldPage extends StatelessWidget { -
Widget buildTextField() { -
return Container( -
padding: const EdgeInsets.all(8.0), -
alignment: Alignment.center, -
height: 60.0, -
decoration: new BoxDecoration( -
color: Colors.blueGrey, -
border: new Border.all(color: Colors.black54, width: 4.0), -
borderRadius: new BorderRadius.circular(12.0)), -
child: new TextFormField( -
decoration: InputDecoration.collapsed(hintText: 'hello'), -
), -
); -
} -
@override -
Widget build(BuildContext context) { -
return Scaffold( -
appBar: AppBar( -
title: Text('TextField'), -
), -
body: Padding( -
padding: const EdgeInsets.all(30.0), -
child: buildTextField(), -
), -
); -
} -
}
InputDecoration.collapsed可以禁用装饰线，而是使用外面包围的Container的装饰线
361
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
