Flutter 自定義彈窗組件

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

成都創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供紅河網(wǎng)站建設(shè)、紅河做網(wǎng)站、紅河網(wǎng)站設(shè)計(jì)、紅河網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)與制作、紅河企業(yè)網(wǎng)站模板建站服務(wù)，十余年紅河做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

共有四個(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)志、任意位置、最大高度、超過可以滑動(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傳送門：

一種更優(yōu)雅的Flutter Dialog解決方案

系統(tǒng)自帶的Dialog實(shí)際上就是Push了一個(gè)新頁面，這樣存在很多好處，但是也存在一些很難解決的問題

上面這些痛點(diǎn)，簡(jiǎn)直個(gè)個(gè)致命 ，當(dāng)然，還存在一些其它的解決方案，例如：

很明顯，使用Overlay可移植性最好，目前很多toast和dialog三方庫便是使用該方案，使用了一些loading庫，看了其中源碼，穿透背景解決方案，和預(yù)期想要的效果大相徑庭、一些dialog庫自帶toast顯示，但是toast顯示卻又不能和dialog共存（toast屬于特殊的信息展示，理應(yīng)能獨(dú)立存在），導(dǎo)致我需要多依賴一個(gè)Toast庫

基于上面那些難以解決的問題，只能自己去實(shí)現(xiàn)，花了一些時(shí)間，實(shí)現(xiàn)了一個(gè)Pub包，基本該解決的痛點(diǎn)都已解決了，用于實(shí)際業(yè)務(wù)沒什么問題

使用 FlutterSmartDialog 包裹下child即可，下面就可以愉快的使用SmartDialog了

使用Overlay的依賴庫，基本都存在一個(gè)問題，難以對(duì)返回事件的監(jiān)聽，導(dǎo)致觸犯返回事件難以關(guān)閉彈窗布局之類，想了很多辦法，沒辦法在依賴庫中解決該問題，此處提供一個(gè) BaseScaffold ，在每個(gè)頁面使用 BaseScaffold ，便能解決返回事件關(guān)閉Dialog問題

當(dāng)時(shí)想解決穿透暗色背景，和背景后面的控件互動(dòng)的時(shí)候，我?guī)缀趿ⅠR想到這倆個(gè)控件，先了解下這倆個(gè)控件吧

分析

這種方案，成功實(shí)現(xiàn)想要的穿透效果，這里了解下 behavior 的幾種屬性

有戲了！很明顯translucent是有希望的，嘗試了幾次，然后成功實(shí)現(xiàn)了想要的效果

注意，這邊有幾個(gè)坑點(diǎn)，提一下

下面是寫的一個(gè)驗(yàn)證小示例

這個(gè)庫花了一些時(shí)間去構(gòu)思和實(shí)現(xiàn)，算是解決幾個(gè)很大的痛點(diǎn)

FlutterSmartDialog一些信息

狀態(tài)管理

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

可以使用 SingleChildScrollView 包裹布局

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

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

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

分兩種情況

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

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

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

原理都是通過判斷輸入框是否獲取了焦點(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è)為透明。

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

給所有輸入框綁定 FoucusNode

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

監(jiān)聽 onEditingComplete 方法

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

最后要記得銷毀

網(wǎng)站題目：flutter彈窗,flutter彈窗alertdialog
地址分享：http://m.rwnh.cn/article24/dsdhice.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、關(guān)鍵詞優(yōu)化、網(wǎng)站策劃、商城網(wǎng)站、電子商務(wù)、移動(dòng)網(wǎng)站建設(shè)

廣告

聲明：本網(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í)需注明來源： 創(chuàng)新互聯(lián)