Flutter文本输入框TextField的焦点控制

题记
—— 执剑天涯,从你的点滴积累开始,所及之处,必精益求精。

github?你可能需要百度同步
CSDN网易云课堂教程掘金
知乎Flutter系列文章 头条同步

本文章首发于微信公众号(biglead) 我的大前端生涯 ,同步刊登各技术论坛。

本文章综述 Flutter 文本输入框 TextField 的焦点的获取与去除,在实际项目开发中,对输入框的焦点的精确控制,可以实现精妙的用户体验。


TextField 系列文章

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,
            ),
          ),
        ),
      ),
    );
  }
}

在这里插入图片描述

早起的年轻人 CSDN认证博客专家 移动开发 项目管理 Java
只要用心去做,每一件事情还是有可能成功的,当然成功是没有界限的,只不过是达到自己心里的那个目标,公众号:我的大前端生涯,一个爱喝茶的程序员,通常会搞搞SpringBoot 、Herbinate、Mybatiys、Android、iOS、Flutter、Vue、小程序等.
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页