设为首页收藏本站
开启辅助访问

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

 您所在的位置：网站首页 › flutter聊天输入框上移 › Flutter中解决输入框(TextField)被键盘遮挡问题

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

2023-10-29 15:45| 来源: 网络整理| 查看: 265

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

扯远了~ 《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 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 _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 _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 { 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: 写文不易，觉得没有浪费你时间，请给个点赞~ 😁



【本文地址】


今日新闻

推荐新闻

CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3