flutter超出,flutter常见问题

完美解决flutter 键盘遮挡/超出(overflow）的坑

一个正常的app,一般都会有登录,注册,密码修改等基本功能界面,如上图的界面再正常不过了吧.这里面就会遇到键盘超出的坑

oh ~~

说实话,我也在网上找了一些解决键盘超出,覆盖的方法,大概有2种方法

在Scaffold里面添加属性resizeToAvoidBottomPadding,设置为false.就是内容不会随键盘弹出而滚动

在有textField的外面包裹一层SingleChildScrollView,这样内容就会随键盘弹出而滚动

前面2个方法基本可以解决大部分的坑了,但有一种坑还是解决不了,就是像开篇那样的效果,上面有textField,底部有提交按钮,你就会发现有各种bug在里面, 最终的解决方案用到了一个第三方库

包裹一层KeyboardAvoider,并且设置属性autoScroll: true,这样就可以完美解决问题,看最终效果图

相关问答

Q1: 【Flutter】图片、内容、滚动空间溢出调整

空间超出提示

注释 ：Flutter Incorrect use of ParentDataWidget

问题原因：Expanded、Flexible等组件，在“Container、Padding、Stack”组件中导致的。

解决方案：保持： Expanded、Flexible 只在 Row、Column 等组件内，不在其他组件内使用。

控件Row有一个水平的布局方向，但是内容已经超出了可显示的范围。

建议我们使用有弹性的控件比如Expanded代替，或者使用可裁剪的控件ClipRect代替，还可以使用具体滚动属性的控件比如ListView代替

1、类似图片加载失败,然后溢出挤压空间，可以用Container包裹一下

直接使用，如果图片地址失效，就会溢出

直接使用,图片链接失效引起

2、类似这种超出

A RenderFlex overflowed by 48 pixels on the right.

3、类似这种Column滚动超出!

实现页面滑动需要用到SingleChildScrollView组件，SingleChildScrollView和Android中ScrollView类似

问题原因：Expanded、Flexible等组件，在“Container、Padding、Stack”组件中导致的。

解决方案：保持：Expanded、Flexible只在Row、Column等组件内，不在其他组件内使用。

Q2: Flutter解决界面超出bug

如上图，最右边有黄色斑马线类似的线。

在这里查找源码

可以看到，Flutter在这里做的处理

_calculateOverflowRegions这个方法，计算界面是否超出边界，如果超出了

就添加一个斑马线的布局，可以通过修改源码的方式，暂时让他隐藏

直接return就可以了。

当然，Flutter这样是为了更好的提示开发者，方便开发的。平时调试的时候还是要打开的。除非上线，如果不放心的话，可以这么写。