flutter 在布局最頂端使用的是Scaffold組件,在點擊輸入框鍵盤彈出后,布局的默認反應是改變屏幕大小重新布局。
這時通常會在Scaffold中添加選項:
resizeToAvoidBottomPadding:false
添加之后,應用整體布局不會隨著鍵盤彈出而刷新改變。
但是鍵盤的彈出仍然會改變 MediaQuery.of(context).size獲取到的數(shù)值,因此如果有輸入框的父組件通過MediaQuery來決定自身大小的話,在鍵盤彈出的時候整個組件仍然會進行刷新導致鍵盤隱藏。
因為只考慮移動端,屏幕大小不會發(fā)生改變,所以考慮將屏幕大小提前保存成固定的數(shù)值。
import 'dart:ui';
//1.獲取屏幕物理大小
double physicalWidth = window.physicalSize.width;
double physicalHeight = window.physicalSize.height;
// 2.獲取dpr
double dpr = window.devicePixelRatio;
?// 3.寬度和高度
double screenWidth = physicalWidth / dpr;
double screenHeight = physicalHeight / dpr;
app啟動之前提前獲取好屏幕大小,在布局時直接引用,鍵盤彈出時就不會出現(xiàn)組件刷新導致鍵盤隱藏的問題。
-------------------------------------2022.5.27 更新----------------------------------------
額外補充一個奇怪的bug:
此bug只在IOS端出現(xiàn),同樣的代碼在安卓端不存在。iphone測試機為IOS 15.4.1。
主要表現(xiàn)為window.physicalSize返回的大小有時正確有時為0
可能導致的原因猜測為window.physicalSize調用的過早,通過延遲調用后bug解決。
//延遲0.5秒加載屏幕大小
Timer.periodic(Duration(milliseconds: 500), (timer) async {
? ? ? ?//獲取屏幕大小
????????timer.cancel()
});文章來源:http://www.zghlxwxcb.cn/news/detail-494354.html
?此bug會導致某些依賴屏幕大小的Widget隨機出現(xiàn)消失情況,bug非常隱蔽,幫大家避避坑。文章來源地址http://www.zghlxwxcb.cn/news/detail-494354.html
到了這里,關于Flutter 點擊輸入框后 鍵盤閃出后立刻消失的文章就介紹完了。如果您還想了解更多內容,請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章,希望大家以后多多支持TOY模板網(wǎng)!