在Flutter中TextField是一个文本输入组件
它可以直接使用
class MyApp1 extends StatefulWidget {
const MyApp1({Key? key}) : super(key: key);
@override
State<MyApp1> createState() => _MyApp1State();
}
class _MyApp1State extends State<MyApp1> {
@override
Widget build(BuildContext context) {
return Column(
children: [TextField()],
);
}
}
也可以配合属性使用完成改变点击前和点击后的下划线变化
class MyApp1 extends StatefulWidget {
const MyApp1({Key? key}) : super(key: key);
@override
State<MyApp1> createState() => _MyApp1State();
}
class _MyApp1State extends State<MyApp1> {
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextField(
decoration: InputDecoration(
hintText: "文本",
hintStyle: TextStyle(color: Colors.black.withOpacity(.2)),
enabledBorder: UnderlineInputBorder(//文本输入前的状态
borderSide: BorderSide(
color: Colors.red.withOpacity(.2),//设置为红色
)),
focusedBorder: UnderlineInputBorder(//文本输入后的状态
borderSide: BorderSide(color: Colors.blue.withOpacity(.2)//设置为蓝色
))),
)
],
);
}
}
点击前:
点击后:
如果您需要它有一个初始的文字,
您可以这样做
获取TextField文本输入组件中文本输入的文本:
class MyApp1 extends StatefulWidget {
const MyApp1({Key? key}) : super(key: key);
@override
State<MyApp1> createState() => _MyApp1State();
}
var title = TextEditingController();//创建TextEditingController类型的值
class _MyApp1State extends State<MyApp1> {
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextField(
controller: title,//获取值用于存放数据
decoration: InputDecoration(
hintText: "文本",
hintStyle: TextStyle(color: Colors.black.withOpacity(.2)),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Colors.red.withOpacity(.2),
)),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.blue.withOpacity(.2)))),
),
FlatButton(
onPressed: () {
print(title.text);//点击按钮将获取文本的值输出到控制台
//这里注意,我们输出的时候需要在后面加上.text否则获取到的就不止是文本了
},
child: Text("点击获取文本输入值"))
],
);
}
}