完美解決flutter 鍵盤遮擋/超出(overflow）的坑

一個正常的app,一般都會有登錄,注冊,密碼修改等基本功能界面,如上圖的界面再正常不過了吧.這里面就會遇到鍵盤超出的坑

成都創(chuàng)新互聯(lián)2013年開創(chuàng)至今，先為北川羌族等服務建站，北川羌族等地企業(yè)，進行企業(yè)商務咨詢服務。為北川羌族企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務解決您的所有建站問題。

oh ~~

說實話,我也在網(wǎng)上找了一些解決鍵盤超出,覆蓋的方法,大概有2種方法

在Scaffold里面添加屬性resizeToAvoidBottomPadding,設置為false.就是內(nèi)容不會隨鍵盤彈出而滾動

在有textField的外面包裹一層SingleChildScrollView,這樣內(nèi)容就會隨鍵盤彈出而滾動

前面2個方法基本可以解決大部分的坑了,但有一種坑還是解決不了,就是像開篇那樣的效果,上面有textField,底部有提交按鈕,你就會發(fā)現(xiàn)有各種bug在里面, 最終的解決方案用到了一個第三方庫

包裹一層KeyboardAvoider,并且設置屬性autoScroll: true,這樣就可以完美解決問題,看最終效果圖

【Flutter】圖片、內(nèi)容、滾動空間溢出調(diào)整

空間超出提示

注釋 ：Flutter Incorrect use of ParentDataWidget

問題原因：Expanded、Flexible等組件，在“Container、Padding、Stack”組件中導致的。

解決方案：保持： Expanded、Flexible 只在 Row、Column 等組件內(nèi)，不在其他組件內(nèi)使用。

控件Row有一個水平的布局方向，但是內(nèi)容已經(jīng)超出了可顯示的范圍。

建議我們使用有彈性的控件比如Expanded代替，或者使用可裁剪的控件ClipRect代替，還可以使用具體滾動屬性的控件比如ListView代替

1、類似圖片加載失敗,然后溢出擠壓空間，可以用Container包裹一下

直接使用，如果圖片地址失效，就會溢出

直接使用,圖片鏈接失效引起

2、類似這種超出

A RenderFlex overflowed by 48 pixels on the right.

3、類似這種Column滾動超出!

實現(xiàn)頁面滑動需要用到SingleChildScrollView組件，SingleChildScrollView和Android中ScrollView類似

問題原因：Expanded、Flexible等組件，在“Container、Padding、Stack”組件中導致的。

解決方案：保持：Expanded、Flexible只在Row、Column等組件內(nèi)，不在其他組件內(nèi)使用。

Flutter解決界面超出bug

如上圖，最右邊有黃色斑馬線類似的線。

在這里查找源碼

可以看到，F(xiàn)lutter在這里做的處理

_calculateOverflowRegions這個方法，計算界面是否超出邊界，如果超出了

就添加一個斑馬線的布局，可以通過修改源碼的方式，暫時讓他隱藏

直接return就可以了。

當然，F(xiàn)lutter這樣是為了更好的提示開發(fā)者，方便開發(fā)的。平時調(diào)試的時候還是要打開的。除非上線，如果不放心的話，可以這么寫。