Flutter 自定義彈窗組件

封裝的彈窗必須要靈活，滿足實際開發中的大部分彈窗，比如有無標題、有無內容、有無關閉按鈕、有無操作按鈕以及按鈕的排列樣式等需要滿足多元化～

創新互聯主營商洛網站建設的網絡公司,主營網站建設方案,成都app開發,商洛h5成都小程序開發搭建,商洛網站營銷推廣歡迎商洛等地區企業咨詢

共有四個文件: ww_dialog.dart 、 ww_middle_bottom_dialog_widget.dart 、 ww_top_dialog_widget.dart 、 ww_top_dialog_item_data.dart

彈窗主要調用類，主要包含： WWDialog.showTopDialog 、 WWDialog.showMiddleDialog 、 WWDialog.showBottomDialog

支持自定義配置背景顏色、字體大小、顏色、統一回調、自定義按鈕、單獨回調、是否帶三角標志、任意位置、最大高度、超過可以滑動等～

部分展示效果：

支持配置背景顏色、字體大小、顏色、字重、按鈕排列方式、標題、內容、按鈕支持完全自定義、點擊的回調等～

部分展示效果：

支持配置背景顏色、字體大小、顏色、字重、按鈕排列方式、標題、內容、按鈕支持完全自定義、點擊的回調等～

部分展示效果：

中間、底部彈窗的彈窗widget

頂部彈窗的彈窗widget

頂部彈窗的數據源數據模型item

github傳送門：

Flutter實戰巧之-showModalBottomSheet 高度自適應

showModalBottomSheet 所彈出的內容高度是固定的。要想自適應自己布局的高度只需如下兩點：

加入 isScrollControlled: true 后，彈窗高度會變成全屏的。接下來就是自己布局中的處理。

BottomPhotoDialog是我自己寫的想要彈出的布局。在根節點中用SingleChildScrollView來包裹Column即可讓彈窗高度適應布局高度

一文解決Flutter中使用TextField遇到的各種疑難雜癥

可以使用 SingleChildScrollView 包裹布局

這里還需要了解一個 Scaffold 中的一個屬性 resizeToAvoidBottomInset

官方文檔給出的解釋就是處理鍵盤遮擋問題，默認是 true，如果不希望頂起需要設置為 false。

在 sdk 低版本的時候是使用 resizeToAvoidBottomPadding 需要將其設置為 false，現在已經棄用。但網上很多文章還沒有改正，仍然用的 resizeToAvoidBottomPadding。

分兩種情況

一種是使用系統的返回鍵，比如 android 底部導航自帶的返回，

另一種是使用導航欄自定義的返回鍵

第一種情況需要在頁面根布局使用 WillPopScope 在 onWillPop 中攔截返回處理。

原理都是通過判斷輸入框是否獲取了焦點

當底部有固定的組件，比如提交按鈕，我們在鍵盤彈起的時候希望按鈕貼著鍵盤頂部固定，但是中間滾動視圖可以自由滾動

可以在 SingleChildScrollView 外部再使用 Stack 包裹，懸浮按鈕使用 Positioned 定位，

還要??注意要給滾動組件底部留出距離防遮擋，同時還有動態加上 bottomBar 的高度，因為在 iphoneX 以上的手機，會有個虛擬按鍵，如果不加上該按鍵高度，同樣會被遮擋

高度獲取方法： MediaQuery.of(context).padding.bottom

在 showDialog 布局中使用 Scaffold 包裹，不要忘了將 backgroundColor 設為透明。

如果彈窗過高，還是需要將高度固定，然后使用 SingleChildScrollView ，彈窗中同樣也可以在執行關閉的時候攔截，判斷鍵盤是否彈起，如果彈起則要先關閉鍵盤。

給所有輸入框綁定 FoucusNode

在 maxLines=1 的情況下，輸入框不支持換行，換行按鈕會變成 done

監聽 onEditingComplete 方法

根布局使用 GestureDetector 或者 InkWell 包裹，點擊的時候收起鍵盤。

最后要記得銷毀

網頁題目：flutter頂部彈窗,flutter狀態欄
本文鏈接：http://vcdvsql.cn/article48/dsdepep.html

成都網站建設公司_創新互聯，為您提供關鍵詞優化、品牌網站制作、靜態網站、網站策劃、小程序開發、網站導航

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯