flutter应用开发中文本输入框TextField的焦点获取控制篇

题记
—— 执剑天涯，从你的点滴积累开始，所及之处，必精益求精，即是折腾每一天。

重要消息

• 精通点的可以查看这里 精述
• Flutter 从入门实践到开发一个APP之UI基础篇 视频
• flutter从入门 到精通 系列文章

---

TextField 系列文章

• TextField的基本使用以及TextField常用属性精讲《点击查看详情》
• TextField 焦点获取控制篇《就是本文章了》
• TextField 输入文本样式 TextStyle 篇《正在发文中》
• TextField 输入文本 textAlign 对齐分析篇《正在发文中》
• TextField 输入文本 decoration 配置边框样式以及提示文本分析篇《正在发文中》
• TextField TextEditingController 分析篇《正在发文中》

1 设置 TextField 直接获取输入焦点

源码如下：

///TextField 焦点获取控制篇
class TextFeildHomePage3 extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return TextFeildHomePageState();
  }
}
class TextFeildHomePageState extends State {
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("TextField 讲解"),
      ),
      body: Container(
        ///SizedBox 用来限制一个固定 width height 的空间
        child: SizedBox(
          width: 400,
          height: 100,
          child: Container(
            color: Colors.white24,
            padding: EdgeInsets.all(10),
            ///Alignment 用来对齐 Widget
            alignment: Alignment(0, 0),
            ///文本输入框
            child: TextField(
              autofocus: true,
            ),
          ),
        ),
      ),
    );
  }
}

然后运行程序，有的手机上会出现异常如下（异常信息只截取了一部分）：

flutter: ══╡ EXCEPTION CAUGHT BY FOUNDATION LIBRARY ╞════════════════════════════════════════════════════════
flutter: The following assertion was thrown while dispatching notifications for FocusNode:
flutter: RenderBox was not laid out: RenderEditable#766b0 NEEDS-LAYOUT NEEDS-PAINT
flutter: 'package:flutter/src/rendering/box.dart':
flutter: Failed assertion: line 1687 pos 12: 'hasSize'
flutter:
flutter: Either the assertion indicates an error in the framework itself, or we should provide substantially
flutter: more information in this error message to help you determine and fix the underlying cause.
flutter: In either case, please report this assertion by filing a bug on GitHub:
flutter:   https://github.com/flutter/flutter/issues/new?template=BUG.md
flutter:
flutter: When the exception was thrown, this was the stack:

出现此异常信息，我们可以理解为当前页面还未绘制完的时候，我们就使用 TextField 来获取输入焦点了，然后负责焦点控制的程序找不到着力点，所以就出现了异常了
那么我们的一个解决方法可以是 不使用 autofocus 属性来获取焦点，可以使用 FocusNode 来控制

2 TextField 中使用 FocusNode

FocusNode可以实现对TextField的焦点事件的监听。

2.1 创建 FocusNode

FocusNode  focusNode = new FocusNode();

2.2 TextField 中使用 FocusNode

TextField 中可通过 focusNode 属性引用

2.3 TextField 通过 focusNode 对输入焦点的控制

///获取输入框焦点
FocusScope.of(context).requestFocus(focusNode);
///失去输入框焦点
focusNode.unfocus();

上述这种情况我们可以在页面 build 完后主动调用，在页面 build 前延时调用也不失为一种方法，下面有一种优雅的方式来调用：

    /// WidgetsBinding 它能监听到第一帧绘制完成，第一帧绘制完成标志着已经Build完成
    WidgetsBinding.instance.addPostFrameCallback((_) {
      ///获取输入框焦点
      FocusScope.of(context).requestFocus(focusNode);
    });

2.4 focusNode 添加对焦点的获取与失去的兼听

    ///添加获取焦点与失去焦点的兼听
    focusNode.addListener((){
      ///当前兼听的 TextFeild 是否获取了输入焦点
      bool hasFocus = focusNode.hasFocus;
      ///当前 focusNode 是否添加了兼听
      bool hasListeners = focusNode.hasListeners;

      print("focusNode 兼听 hasFocus:$hasFocus  hasListeners:$hasListeners");
    });

效果图如下

3 TextFeild 优雅的结合 focusNode 实现对焦点的控制

源代码如下：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

///整理
///TextField 焦点获取控制篇
class TextFeildHomePage3 extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return TextFeildHomePageState();
  }
}

class TextFeildHomePageState extends State {
  
  ///用来控制  TextField 焦点的获取与关闭
  FocusNode focusNode = new FocusNode();

  @override
  void initState() {
    super.initState();
    
    ///添加获取焦点与失去焦点的兼听
    focusNode.addListener((){
      ///当前兼听的 TextFeild 是否获取了输入焦点
      bool hasFocus = focusNode.hasFocus;
      ///当前 focusNode 是否添加了兼听
      bool hasListeners = focusNode.hasListeners;

      print("focusNode 兼听 hasFocus:$hasFocus  hasListeners:$hasListeners");
    });

    /// WidgetsBinding 它能监听到第一帧绘制完成，第一帧绘制完成标志着已经Build完成
    WidgetsBinding.instance.addPostFrameCallback((_) {
      ///获取输入框焦点
      FocusScope.of(context).requestFocus(focusNode);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("TextField 讲解"),
        actions: <Widget>[
          FlatButton(child: Text("获取"),onPressed: (){
            FocusScope.of(context).requestFocus(focusNode);
          },),
          FlatButton(child: Text("失去"),onPressed: (){
            focusNode.unfocus();
          },),
        ],
      ),
      body: Container(
        ///SizedBox 用来限制一个固定 width height 的空间
        child: SizedBox(
          width: 400,
          height: 100,
          child: Container(
            color: Colors.white24,
            padding: EdgeInsets.all(10),
            ///Alignment 用来对齐 Widget
            alignment: Alignment(0, 0),
            ///文本输入框
            child: TextField(
//              autofocus: true,
            focusNode: focusNode,
            ),
          ),
        ),
      ),
    );
  }
}