flutterbug,Flutterbuggiest

flutter踩坑日记（三）键盘遮挡输入框问题

近期开发项目中，测试提了个bug-----

闹心

真闹心……

自己试了几个办法不行，

百度了几个办法

闹心……

后来去flutter的github看别人提的issue 说是原生的问题（项目是混合开发）

结果

（就这么个破玩意搞了我一天，气啊~……小声BB）

相关问答

Q1: Flutter textField随着键盘弹出升高，点击空白处收回键盘

1、Flutter中的textField要想实现随着键盘弹出自动升高，必须要在Scaffold中，如下所示

2、如果textfield位置比较下面或者小屏幕时，在键盘弹出的时候导致溢出bug

这时候可以嵌套一层SingleChildScrollView（具体嵌套位置可以根据需要调整），如下所示

效果如下：

3、点击空白处收起键盘，直接嵌套一层GestureDetector即可，嵌套位置可以在Scaffold的body层，可以自己调整。

Q2: flutter跳转原生页面后的穿透问题

现象：

flutter页面通过present跳转原生页面后，原生页面上的点击会首先响应下面的flutter页面中的内容（比如按钮什么的）。

这是flutter框架一直存在的一个bug。在github上有相关的issue。

原因推测：

推测是flutter对控制器（或者view）加了分类，重写了控制器的点击事件，用来计算是否在对应的点击位置有flutter响应事件。没有的话再扔出去点击事件。

解决方案1：

在原生控制器中，加入点击事件的几个方法的空实现，用以覆盖flutter框架中的实现：

-(void)touchesBegan:(NSSetUITouch * *)touches withEvent:(UIEvent *)event{

}

-(void)touchesMoved:(NSSetUITouch * *)touches withEvent:(UIEvent *)event{

}

-(void)touchesCancelled:(NSSetUITouch * *)touches withEvent:(UIEvent *)event{

}

-(void)touchesEnded:(NSSetUITouch * *)touches withEvent:(UIEvent *)event{

}

让事件不被flutter截获即可。

解决方案2：

直接切换window的根控制器到原生控制器即可。别忘暂时保存flutter控制器。

在返回时再切换回flutter中。

解决方案3：

在flutter跳转到原生页面之前，在flutter中加上一个蒙层，用来隔绝手势往flutter下面的view传递。原生页面返回flutter时再移除这个蒙层。