Flutter 中TextField详解

在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("点击获取文本输入值"))
      ],
    );
  }
}