Flutter 自定義彈窗組件

封裝的彈窗必須要靈活，滿足實(shí)際開(kāi)發(fā)中的大部分彈窗，比如有無(wú)標(biāo)題、有無(wú)內(nèi)容、有無(wú)關(guān)閉按鈕、有無(wú)操作按鈕以及按鈕的排列樣式等需要滿足多元化～

創(chuàng)新互聯(lián)主營(yíng)商洛網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,成都app開(kāi)發(fā),商洛h5成都小程序開(kāi)發(fā)搭建,商洛網(wǎng)站營(yíng)銷推廣歡迎商洛等地區(qū)企業(yè)咨詢

共有四個(gè)文件: ww_dialog.dart 、 ww_middle_bottom_dialog_widget.dart 、 ww_top_dialog_widget.dart 、 ww_top_dialog_item_data.dart

彈窗主要調(diào)用類，主要包含： WWDialog.showTopDialog 、 WWDialog.showMiddleDialog 、 WWDialog.showBottomDialog

支持自定義配置背景顏色、字體大小、顏色、統(tǒng)一回調(diào)、自定義按鈕、單獨(dú)回調(diào)、是否帶三角標(biāo)志、任意位置、最大高度、超過(guò)可以滑動(dòng)等～

部分展示效果：

支持配置背景顏色、字體大小、顏色、字重、按鈕排列方式、標(biāo)題、內(nèi)容、按鈕支持完全自定義、點(diǎn)擊的回調(diào)等～

部分展示效果：

支持配置背景顏色、字體大小、顏色、字重、按鈕排列方式、標(biāo)題、內(nèi)容、按鈕支持完全自定義、點(diǎn)擊的回調(diào)等～

部分展示效果：

中間、底部彈窗的彈窗widget

頂部彈窗的彈窗widget

頂部彈窗的數(shù)據(jù)源數(shù)據(jù)模型item

github傳送門：

Flutter實(shí)戰(zhàn)巧之-showModalBottomSheet 高度自適應(yīng)

showModalBottomSheet 所彈出的內(nèi)容高度是固定的。要想自適應(yīng)自己布局的高度只需如下兩點(diǎn)：

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

BottomPhotoDialog是我自己寫的想要彈出的布局。在根節(jié)點(diǎn)中用SingleChildScrollView來(lái)包裹Column即可讓彈窗高度適應(yīng)布局高度

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

可以使用 SingleChildScrollView 包裹布局

這里還需要了解一個(gè) Scaffold 中的一個(gè)屬性 resizeToAvoidBottomInset

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

在 sdk 低版本的時(shí)候是使用 resizeToAvoidBottomPadding 需要將其設(shè)置為 false，現(xiàn)在已經(jīng)棄用。但網(wǎng)上很多文章還沒(méi)有改正，仍然用的 resizeToAvoidBottomPadding。

分兩種情況

一種是使用系統(tǒng)的返回鍵，比如 android 底部導(dǎo)航自帶的返回，

另一種是使用導(dǎo)航欄自定義的返回鍵

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

原理都是通過(guò)判斷輸入框是否獲取了焦點(diǎn)

當(dāng)?shù)撞坑泄潭ǖ慕M件，比如提交按鈕，我們?cè)阪I盤彈起的時(shí)候希望按鈕貼著鍵盤頂部固定，但是中間滾動(dòng)視圖可以自由滾動(dòng)

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

還要??注意要給滾動(dòng)組件底部留出距離防遮擋，同時(shí)還有動(dòng)態(tài)加上 bottomBar 的高度，因?yàn)樵?iphoneX 以上的手機(jī)，會(huì)有個(gè)虛擬按鍵，如果不加上該按鍵高度，同樣會(huì)被遮擋

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

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

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

給所有輸入框綁定 FoucusNode

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

監(jiān)聽(tīng) onEditingComplete 方法

根布局使用 GestureDetector 或者 InkWell 包裹，點(diǎn)擊的時(shí)候收起鍵盤。

最后要記得銷毀

網(wǎng)頁(yè)題目：flutter頂部彈窗,flutter狀態(tài)欄
本文鏈接：http://chinadenli.net/article48/dsdepep.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、品牌網(wǎng)站制作、靜態(tài)網(wǎng)站、網(wǎng)站策劃、小程序開(kāi)發(fā)、網(wǎng)站導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)