Flutter中解决输入框(TextField)被键盘遮挡问题

  最近在工作中遇到了文本框被输入法遮挡的问题，在网上找了一些方法，一言难尽，现在很多人写技术博客，要不就随便转一转，或者随便一写，也不讲解清楚，或者传图等。个人觉得不好，既然要写技术博客，就要把他写好，可能自己会麻烦点，费点事。但是，如果要写博客，我觉得要尽量让人理解，不要就放个链接，或者放段代码等等，一副只可意会不可言传的表情~~
  这是我写博客的初衷，给自己留下知识，也给别人带来知识。尽管你的一篇技术博客内容可能很简单。最近在一本《靠谱》的书中读到一节“让对方听得懂”，也是这么个意思，把读你博客的读者都当成小白，用简练的文字向读者讲述你的知识。

扯远了~
《Flutter的拨云见日》系列文章如下：
1、Flutter中指定字体(全局或者局部，自有字库或第三方)
2、Flutter发布Package(Pub.dev或私有Pub仓库)
3、Flutter中解决输入框(TextField)被键盘遮挡问题

一、Flutter自带文本框自适应输入法buff

  首先一个页面如果在buildView中被包裹在Scaffold组件中，那么很幸运Scaffold是自带自适应输入法弹出的，它有一个属性resizeToAvoidBottomInset，用来控制Scaffold组件是否需要自适应输入法弹出，重新计算view的高度，它是默认打开的。

Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: _buildContentView(context)  //被ListView或者SingleChildScrollView等滑动控件包裹的TextField
    );

效果如下图(如果文本框被输入法遮挡，Scaffold会默认重新计算整个View的高度，其实也就是减去输入法的高度，让文本框滑动不被遮挡):

normal.gif

并且随着输入的字数增加，文本框是可以自适应向上滑动的。自带的就是香~👍👍👍

下面我们看下resizeToAvoidBottomInset设置为false，也就是不自适应输入法的情况，如图：

Scaffold(
      resizeToAvoidBottomInset: false,
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: _buildContentView(context) //被ListView或者SingleChildScrollView等滑动控件包裹的TextField
);

  _buildContentView(BuildContext context) {
    return Container(
      padding: EdgeInsets.only(left: 20.0, right: 20.0, top: 20.0, ),
      child: Stack(
        children: [
///用SingleChildScrollView或者ListView都可以
//          SingleChildScrollView(
//            child: Column(
//                  children: [
//                    Text(
//                      '''
//                      ''',
//                      style: TextStyle(fontSize: 20.0, color: Colors.black),
//                    ),
//                   TextField(
//                    ),
//                  ],
//                )
             ListView(
                  children: [
                    Text(
                      '''
                      ''',
                      style: TextStyle(fontSize: 20.0, color: Colors.black),
                    ),
                   TextField(
                    ),
                  ],
             )
        ],
      ),
    );
  }

no_resize.gif

二、“变态”需求，文本框全显示

  在Part 1中，其实我们可以看到flutter Scaffold已经为大家考虑了文本框被输入法遮挡的问题，文本框也可以根据输入的问题自适应向上滑动，可以木有办法，PO要求文本框全部显示粗来，怎么办？ 😩😩😩~

  木有办法，只有把民工必备技能使出，只有把度娘、古哥请出来。还真别说，还真是乱七八糟的，没一个讲清楚，讲透的。不是没图没真相，就是贴了一段不知出处的代码。算了算了，实践出真知。

2.1 首先，看图说话，下图确实做到了，输入法弹出是，文本框全显示，👍👍👍(有两把烂刷子~ 😆)

resize_display_all.gif

2.2 嗯，前方高能，上一段不知出处的代码👌😯

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:meta/meta.dart';

///
/// Helper class that ensures a Widget is visible when it has the focus
/// For example, for a TextFormField when the keyboard is displayed
///
/// 使用方法:
///
/// In the class that implements the Form,
///   Instantiate a FocusNode
///   FocusNode _focusNode = new FocusNode();
///
/// In the build(BuildContext context), wrap the TextFormField as follows:
///
///   new EnsureVisibleWhenFocused(
///     focusNode: _focusNode,
///     child: new TextFormField(
///       ...
///       focusNode: _focusNode,
///     ),
///   ),
///
/// Initial source code written by Collin Jackson.
/// Extended (see highlighting) to cover the case when the keyboard is dismissed and the
/// user clicks the TextFormField/TextField which still has the focus.
///
class EnsureVisibleWhenFocused extends StatefulWidget {
  const EnsureVisibleWhenFocused({
    Key key,
    @required this.child,
    @required this.focusNode,
    this.curve: Curves.ease,
    this.duration: const Duration(milliseconds: 100),
  }) : super(key: key);

  /// The node we will monitor to determine if the child is focused
  ///传入FocusNode，用于监听TextField获取焦点事件
  final FocusNode focusNode;

  /// The child widget that we are wrapping
  final Widget child;

  /// The curve we will use to scroll ourselves into view.
  ///
  /// Defaults to Curves.ease.
  final Curve curve;

  /// The duration we will use to scroll ourselves into view
  ///
  /// Defaults to 100 milliseconds.
  final Duration duration;

  @override
  _EnsureVisibleWhenFocusedState createState() => new _EnsureVisibleWhenFocusedState();
}

///
/// We implement the WidgetsBindingObserver to be notified of any change to the window metrics
///实现WidgetsBindingObserver接口，监听屏幕矩阵变化事件
class _EnsureVisibleWhenFocusedState extends State<EnsureVisibleWhenFocused> with WidgetsBindingObserver  {

  @override
  void initState(){
    super.initState();
    widget.focusNode.addListener(_ensureVisible);  ///监听焦点事件
    WidgetsBinding.instance.addObserver(this);      ///监听屏幕矩阵是否发生变化
  }

  @override
  void dispose(){
    WidgetsBinding.instance.removeObserver(this);
    widget.focusNode.removeListener(_ensureVisible);
    super.dispose();
  }

  ///
  /// This routine is invoked when the window metrics have changed.
  /// This happens when the keyboard is open or dismissed, among others.
  /// It is the opportunity to check if the field has the focus
  /// and to ensure it is fully visible in the viewport when
  /// the keyboard is displayed
  ///屏幕矩阵发生变化时系统调用，如键盘弹出或是收回
  @override
  void didChangeMetrics(){
    super.didChangeMetrics();
    if (widget.focusNode.hasFocus){ ///有焦点时，进入滑动显示处理Function
      _ensureVisible();
    }
  }

  ///
  /// This routine waits for the keyboard to come into view.
  /// In order to prevent some issues if the Widget is dismissed in the
  /// middle of the loop, we need to check the "mounted" property
  ///
  /// This method was suggested by Peter Yuen (see discussion).
  ///等待键盘显示在屏幕上
  Future<Null> _keyboardToggled() async {
    if (mounted){
      EdgeInsets edgeInsets = MediaQuery.of(context).viewInsets;
      while (mounted && MediaQuery.of(context).viewInsets == edgeInsets) {
        await new Future.delayed(const Duration(milliseconds: 10));
      }
    }

    return;
  }

  Future<Null> _ensureVisible() async {
    // Wait for the keyboard to come into view
    await Future.any([new Future.delayed(const Duration(milliseconds: 300)), _keyboardToggled()]);

    // No need to go any further if the node has not the focus
    if (!widget.focusNode.hasFocus){
      return;
    }
    // Find the object which has the focus
    //找到Current RenderObjectWidget，获得当前获得焦点的widget，这里既TextField
    final RenderObject object = context.findRenderObject();
    final RenderAbstractViewport viewport = RenderAbstractViewport.of(object);

    // If we are not working in a Scrollable, skip this routine
    if (viewport == null) {
      return;
    }

    // Get the Scrollable state (in order to retrieve its offset)
    //获取滑动状态，目的是为了获取滑动的offset
    ScrollableState scrollableState = Scrollable.of(context);
    assert(scrollableState != null);

    // Get its offset
    ScrollPosition position = scrollableState.position;
    double alignment;

    ///这里需要解释下
    ///1、position.pixels是指滑动widget，滑动的offset（一般指距离顶部的偏移量(滑出屏幕多少距离)）
    ///2、viewport.getOffsetToReveal(object, 0.0).offset 这个方法，可以看下源码
    ///      他有一个alignment参数，0.0 代表显示在顶部，0.5代表显示在中间，1.0代表显示在底部
    ///       offset是指view显示在三个位置时距离顶部的偏移量
    ///       他们两者相比较就可以知道当前滑动widget是需要向上还是向下滑动，来完全显示TextField

    ///判断TextField处于顶部时是否全部显示，需不需下滑来完整显示
    if (position.pixels > viewport.getOffsetToReveal(object, 0.0).offset) { 
      // Move down to the top of the viewport
      alignment = 0.0;
    ///判断TextField处于低部时是否全部显示，需不需上滑来完整显示
    } else if (position.pixels < viewport.getOffsetToReveal(object, 1.0).offset){
      // Move up to the bottom of the viewport
      alignment = 1.0;
    } else {
      // No scrolling is necessary to reveal the child
      return;
    }

    //这是ScrollPosition的内部方法，将给定的view 滚动到给定的位置，
   //alignment的意义和上面描述的一致， 三种位置顶部，底部，中间
    position.ensureVisible(
      object,
      alignment: alignment,
      duration: widget.duration,
      curve: widget.curve,
    );
  }

  @override
  Widget build(BuildContext context) {
    return widget.child;
  }
}

这里的不可描述代码挺长的，其实仔细看并不复杂，有很多基本我已经进行了中文解释。大家多看代码
1、传入FocusNode，这里是为了监听TextField获取焦点情况
2、实现WidgetsBindingObserver接口，是为了监听屏幕矩阵变化(输入法弹出或收回)
3、在didChangeMetrics()方法中接受屏幕矩阵变化，进入滑动逻辑处理方法_ensureVisible()
4、在_ensureVisible()方法中首先会进行300毫秒的循环等待，等待输入法显示在屏幕中
5、然后获取当前获取焦点的RenderObject

    // Find the object which has the focus
    final RenderObject object = context.findRenderObject();
    final RenderAbstractViewport viewport = RenderAbstractViewport.of(object);

6、获取滑动widget的ScrollPosition，实则是为了获取滑动的偏移量(也就是滑出屏幕距离)

    // Get the Scrollable state (in order to retrieve its offset)
    ScrollableState scrollableState = Scrollable.of(context);
    assert(scrollableState != null);

    // Get its offset
    ScrollPosition position = scrollableState.position;

7、先解释viewport.getOffsetToReveal(object, 0.0).offset方法，可以看下源码，他有一个alignment参数，0.0 代表显示在顶部，0.5代表显示在中间，1.0代表显示在底部。offset是指view显示在三个位置时距离顶部的偏移量

    ///判断TextField处于顶部时是否全部显示，需不需下滑来完整显示
    if (position.pixels > viewport.getOffsetToReveal(object, 0.0).offset) { 
      // Move down to the top of the viewport
      alignment = 0.0;
    ///判断TextField处于低部时是否全部显示，需不需上滑来完整显示
    } else if (position.pixels < viewport.getOffsetToReveal(object, 1.0).offset){
      // Move up to the bottom of the viewport
      alignment = 1.0;
    } else {
      // No scrolling is necessary to reveal the child
      return;
    }

7.1 position.pixels > viewport.getOffsetToReveal(object, 0.0).offset 代表这种情况

image.png image.png

7.2 position.pixels < viewport.getOffsetToReveal(object, 1.0).offset 代表这种情况

image.png

8、根据7中比较得出的alignment也就是需要显示的位置，调用ScrollPosition内部方法滑动至指定位置

    //这是ScrollPosition的内部方法，将给定的view 滚动到给定的位置，
   //alignment的意义和上面描述的一致， 三种位置顶部，底部，中间
    position.ensureVisible(
      object,
      alignment: alignment,
      duration: widget.duration,
      curve: widget.curve,
    );

文字多有难懂，意乱，该用图时就用图，上图
第一个TextField的位置是alignment = 0.0, 底下那个TextField的位置是alignment = 1.0

滑动位置根据alignment.gif

2.3 使用方法

代码中也是讲到了，其实他就是一个包装类，将TextField用EnsureVisibleWhenFocused类包裹就可以，并讲FocusNode传入，因为它需要监听焦点

EnsureVisibleWhenFocused(
  focusNode: _contentFocusNode,
    child: TextField(

    ),
),

三、全显需求解决，还剩下一个问题

  因为有时候我们使用ListView或者ScrollView，然后这些滑动View中有文本框，我们在页面底部需要有一个Submit或者Next按钮。 这需求并不变态，常规操作。

如图：

底部固定悬浮按钮.png

实现底部固定悬浮按钮，想必大家都知道，类似于android中的FrameLayout，在Flutter中我们可以使用Stack和Positioned两个widget实现。 这不难。

嗯~ 实现个这个有什么难度，小case!!!

可是当你再一点文本框输入时，你傻脸了，什么鬼？ 底部固定悬浮按钮跟着输入框一起上来了，￣□￣｜｜.png

什么原因？我是谁？我在哪？因为前面说过Scaffold默认会打开重新计算View高度的设置，而布局是Stack的，Next按钮使用Positioned布局在离底部38.0px的地方，自然就出现在输入法上面了~~~
但是又不能把Scaffold设置关掉，因为关了文本框又不会自适应滑动了~

Stack(
   children: [
      ListView(
         children: [],
      ),

      Positioned(
           bottom: 38.0,
           left: 0,
           right: 0,
           child: MaterialButton(
           ),
      ),
    ],
),

大写尴尬~

后面思考了下，还是有办法滴~
主要是有两种方式：

3.1 第一种估计都能想到，监听键盘弹出事件，来隐藏或者显示Next按钮

既然想到就开始action吧~，
1、这里我用了第三方库来获取键盘弹出事件--->flutter_keyboard_visibility: 3.2.2
2、自己动手类似于Part 2中一样继承StatefullWidget，自己捣鼓一个监听键盘的包装类

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter_keyboard_visibility/flutter_keyboard_visibility.dart';
import 'package:meta/meta.dart';

class EnsureButtonVisibleWhenFocused extends StatefulWidget {
  const EnsureButtonVisibleWhenFocused({
    Key key,
    @required this.child,
  }) : super(key: key);

  /// The child widget that we are wrapping
  final Widget child;

  @override
  _EnsureVisibleWhenFocusedState createState() => new _EnsureVisibleWhenFocusedState();
}

class _EnsureVisibleWhenFocusedState extends State<EnsureButtonVisibleWhenFocused> {
  bool isKeyboardVisible = false;

  @override
  void initState(){
    super.initState();
    KeyboardVisibility.onChange.listen((isKeyboardVisible) {
      if(this.mounted) {
        setState(() {
          this.isKeyboardVisible = isKeyboardVisible;
        });
      }
    });
  }

  @override
  void dispose(){
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return isKeyboardVisible ? SizedBox() : widget.child;
  }
}

3、将监听键盘包装类EnsureButtonVisibleWhenFocused包裹Next Button

EnsureButtonVisibleWhenFocused(
   child: Positioned(
     bottom: 38.0,
     left: 0,
     right: 0,
     child: MaterialButton(
     ),
   ),
)

4、成品展示，铛铛铛铛~

resize_display_all_with_next_display.gif

3.2 是不是感觉方法一过于繁琐？魔改从无止境~

1、在Page页面的build方法中加入

@override
Widget build(BuildContext context) {
    double bottom = MediaQuery.of(context).viewInsets.bottom;   ///这里bottom为0说明键盘没有弹出，>0则是键盘弹出
}

2、在Positioned中加入如下鬼魅逻辑O(∩_∩)O哈哈~

Positioned(
   bottom: bottom > 0 ? 100.0 * -1 : 38.0, ///键盘弹出时，给Positioned的bottom设置负值，
                                                      ///那么它肯定被遗落在看不见的边边jiaojiao
                                                      ///当键盘收回时，给其设置正常的bottom就粗现了
   left: 0,
   right: 0,
    child: MaterialButton(
   ),
)

3、效果和3.1出奇的一致，不贴图了，去试试吧~

四、收队

一上午加一中午，写博客实属不易，很简单的东西，要全部写出来，写清楚，讲明白，还是很耗费时间的，我既然写，就要把它写清楚，讲明白，这是我的初衷。希望是偶确实写清楚，讲明白的。如有不明白，欢迎留言，偶们一起探讨，为您解忧。也有助于偶更好的写清楚，讲明白~

今天就到这吧~ 休息_休息会儿

申明：禁用于商业用途，如若转载，请附带原文链接。https://www.jianshu.com/p/5bf431c5d03d蟹蟹~

PS: 写文不易，觉得没有浪费你时间，请给个点赞~ 😁