Flutter TextField(加深探索)

距离上次探索TextField已经过去了12天，那么现在看看这将近两周时间中，我又探索到了什么呢?

首先就是TextField的焦点,可以使用于点击前和点击后的变化

还有一个指定焦点，可以在你跳转到这个页面后，自动锁定文本输入框:

首先是获取TextField焦点后的样式转换:

先看点击前(未获取焦点前的)效果:

 然后是点击后(获取焦点后)的效果: 

 然后上代码:

class MyApp1 extends StatefulWidget {
  const MyApp1({Key? key}) : super(key: key);

  @override
  State createState() => _MyApp1State();
}

FocusNode focusNode = FocusNode();

var bool1 = true;

class _MyApp1State extends State {
  @override
  void initState() {
    focusNode.addListener(() {
      if (focusNode.hasFocus) {
        //我们设置他获得焦点的时候将bool1取反
        setState(() {
          bool1 = !bool1;
        });
        // print(bool1);
        print("获取焦点");
      } else {
        setState(() {
          bool1 = !bool1;
        });
        print("失去焦点");
      }
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    var size = MediaQuery.of(context).size;
    return Container(
        width: size.width,
        height: size.height,
        color: Colors.green,
        child: Stack(
          children: [
            Positioned(
              top: size.height * 0.4,
              left: size.width * 0.2,
              child: Container(
                width: size.width * 0.6,
                height: 70,
                color:
                    bool1 ? Colors.white.withOpacity(.5) : Colors.transparent,
                //这里三元表达式，如果bool1是true那么就是白色，否则就是透明色
                child: TextField(
                  focusNode: focusNode, //获取焦点数据
                  decoration: InputDecoration(
                      enabledBorder: UnderlineInputBorder(
                          borderSide: BorderSide.none), //点击前颜色
                      focusedBorder: UnderlineInputBorder(
                          borderSide: BorderSide(color: Colors.white)), //点击后颜色
                      labelText: "Email",
                      labelStyle: TextStyle(
                          color: Colors.white,
                          fontWeight: FontWeight.bold,
                          fontSize: 33)),
                ),
              ),
            ),
          ],
        ));
  }
}

然后是获得焦点使用autofocus:ture,会自动获取焦点

class MyApp1 extends StatefulWidget {
  const MyApp1({Key? key}) : super(key: key);

  @override
  State createState() => _MyApp1State();
}

FocusNode focusNode = FocusNode();

var bool1 = true;

class _MyApp1State extends State {
  @override
  void initState() {
    focusNode.addListener(() {
      if (focusNode.hasFocus) {
        //我们设置他获得焦点的时候将bool1取反
        setState(() {
          bool1 = !bool1;
        });
        // print(bool1);
        print("获取焦点");
      } else {
        setState(() {
          bool1 = !bool1;
        });
        print("失去焦点");
      }
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    var size = MediaQuery.of(context).size;
    return Container(
        width: size.width,
        height: size.height,
        color: Colors.green,
        child: Stack(
          children: [
            Positioned(
              top: size.height * 0.4,
              left: size.width * 0.2,
              child: Container(
                width: size.width * 0.6,
                height: 70,
                color:
                bool1 ? Colors.white.withOpacity(.5) : Colors.transparent,
                //这里三元表达式，如果bool1是true那么就是白色，否则就是透明色
                child: TextField(
                  autofocus: true,
                  focusNode: focusNode, //获取焦点数据
                  decoration: InputDecoration(
                      enabledBorder: UnderlineInputBorder(
                          borderSide: BorderSide.none), //点击前颜色
                      focusedBorder: UnderlineInputBorder(
                          borderSide: BorderSide(color: Colors.white)), //点击后颜色
                      labelText: "Email",
                      labelStyle: TextStyle(
                          color: Colors.white,
                          fontWeight: FontWeight.bold,
                          fontSize: 33)),
                ),
              ),
            ),
          ],
        ));
  }
}