Flutter中showDialog()后關閉Dialog

在耗時操作的時候，一般都要彈出一個加載框，然后在完成的時候再把加載框關掉，在Flutter中可以直接用showDialog()來彈出一個對話框。

公司主營業(yè)務：成都網站制作、網站建設、移動網站開發(fā)等業(yè)務。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網宣傳，提高企業(yè)的競爭能力。創(chuàng)新互聯(lián)是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)推出盈江免費做網站回饋大家。

這是一個簡單的提示對話框，包含了關閉按鈕，點擊就能關閉。但一般的耗時操作完成，就需要我們自己把dialog關閉掉。

首先，開啟dialog的時機。由于我們需要獲取到BuildContext，所以就得等build()方法走完，這里可以用Future.delayed()來等創(chuàng)建好BuildContext再進行創(chuàng)建，或者用Timer來延遲操作，我選擇了前者。

其中delayed()在initState()結尾來做就行，這里參考網友封裝了一個LoadingDialog。

那么接下來要在什么時機關閉呢？

一開始，我理所當然的以為，是在異步方法結束后，去更新界面的時候關閉，也就是setState(() {})的時候，可是不管怎么嘗試，用Navigator.pop()不行，用Navigator.of(context, rootNavigator: true).pop(result)也不行，用FlutterBoost.singleton.close(id)也不行，用FlutterBoost.singleton.closeCurrent()也不行，都會直接把非Dialog的頁面也關閉掉，這讓我百思不得其解，因為showDialog()的本質也是新建了一個Route出來，也就是最頂層的頁面是彈出的Dialog，可是為什么關不掉呢。

一番思前想后，把showDialog的邏輯移到和異步邏輯同級，也就是setState(() {})外面，然后把showDialog()自身創(chuàng)建的BuildContext傳進去就能正常關閉了。也就是，在setState(() {})的時候，其實用的context還是非Dialog頁面的，所以關閉的當然就不是Dialog了。

持有Dialog自己的BuildContext，然后在異步以后調用就行了。

flutter 鍵盤彈出時list view 置底

1、點擊輸入flutter框彈出軟鍵盤時，遮擋本輸入框一部分。

2、點擊輸入框，輸入框跟隨軟鍵盤自動上移時其他不該移動的內容也跟隨上移導致的flutter鍵盤彈出時listview置底。

flutter在initState中顯示Dialog加載框

Future.delayed(Duration.zero, () {

showDialog(

context: context,

barrierDismissible: false,

builder: (_) {

return LoadingDialog();

});

});

Flutter TextField 文本輸入框的基本屬性及詳解

源碼分析：

分析源碼可得，TextField 是有狀態(tài) StatefulWidget，有豐富的屬性，自定義化較高，實踐中需要合理利用各種回調；

1、光標的相關屬性；cursorColor 為光標顏色，cursorWidth 為光標寬度，cursorRadius 為光標圓角；其中 Radius 提供了 circle 圓角和 elliptical 非圓角兩種；

2、textAlign 為文字起始位置，可根據業(yè)務光標居左/居右/居中等；注意只是文字開始方向；textDirection 問文字內容方向，從左向右或從右向左；

3、maxLength 為字符長度，設置時默認是展示一行，且右下角有編輯長度與整體長度對比；與 maxLengthEnforced 配合，maxLengthEnforced 為 true 時達到最大字符長度后不可編輯；為 false 時可繼續(xù)編輯展示有差別；

4、設置 maxLength 之后右下角默認有字符計數器，設置 TextField.noMaxLength 即可只展示輸入字符數；

5、maxLines 為允許展現(xiàn)的最大行數，在使用 maxLength 時內容超過一行不會自動換行，因為默認 maxLines=1，此時設置為 null 或固定展示行數即可自動換行；區(qū)別在于 null 會展示多行，而 maxLines 最多只展示到設置行數；

6、obscureText 是否隱藏編輯內容，常見的密碼格式；

7、enableInteractiveSelection 長按是否出現(xiàn)【剪切/復制/粘貼】菜單；不可為空；

8、keyboardAppearance 為鍵盤亮度，包括 Brightness.dark/light 兩種，但僅限于 iOS 設備；

9、textCapitalization 文字大小寫；理論上 sentences 為每句話第一個字母大寫；characters為每個字母大寫；words 為每個單詞首字母大寫；但該屬性僅限于 text keybord，和尚在本地更換多種方式并未實現(xiàn)，有待研究；

10、keyboardType 為鍵盤類型，和尚理解整體分為數字鍵盤和字母鍵盤等；根據設置的鍵盤類型，鍵盤會有差別；

a. 數字鍵盤

--1-- datetime 鍵盤上可隨時訪問 : 和 /；

--2-- phone 鍵盤上可隨時訪問 # 和 *；

--3-- number 鍵盤上可隨時訪問 + - * /

b. 字母鍵盤

--1-- emailAddress 鍵盤上可隨時訪問 @ 和 .；

--2-- url 鍵盤上可隨時訪問 / 和 .；

--3-- multiline 適用于多行文本換行；

--4-- text 默認字母鍵盤；

11、textInputAction 通常為鍵盤右下角操作類型，類型眾多，建議多多嘗試；

12、autofocus 是否自動獲取焦點，進入頁面優(yōu)先獲取焦點，并彈出鍵盤，若頁面中有多個 TextField 設置 autofocus 為 true 則優(yōu)先獲取第一個焦點；

13、focusNode 手動獲取焦點，可配合鍵盤輸入等減少用戶操作次數，直接獲取下一個 TextField 焦點；

14、enabled 設為 false 之后 TextField 為不可編輯狀態(tài)；

15、decoration 為邊框修飾，可以借此來調整 TextField 展示效果；可以設置前置圖標，后置圖片，邊框屬性，內容屬性等，會在后續(xù)集中嘗試；若要完全刪除裝飾，將 decoration 設置為空即可；

16、inputFormatters 為格式驗證，例如原生 Android 中通常會限制輸入手機號或其他特殊字符，在 Flutter 中也可以借此來進行格式限制，包括正則表達式；使用時需要引入 package:flutter/services.dart；

a. LengthLimitingTextInputFormatter 限制最長字符；

b. WhitelistingTextInputFormatter 僅允許輸入白名單中字符；如 digitsOnly 僅支持數字 [0-9]；

c. BlacklistingTextInputFormatter 防止輸入黑名單中字符；如 singleLineFormatter 強制輸入單行；

分析源碼 RegExp("[/]") 可以設置正則表達式；

17、onChanged 文本內容變更時回調，可實時監(jiān)聽 TextField 輸入內容；

18、controller 文本控制器，監(jiān)聽輸入內容回調；

19、onTap 點擊 TextField時回調；

20、onEditingComplete 在提交內容時回調，通常是點擊回車按鍵時回調；

21、onSubmit 在提交時回調，不可與 onEditingComplete 同時使用，區(qū)別在于 onSubmit 是帶返回值的回調；

問題小結：

當 TextField 設置 enableInteractiveSelection 屬性后長按會出現(xiàn)菜單，默認為英文，可通過設置 Flutter 國際化來處理；

（1）在 pubspec.yaml 中集成 flutter_localizations；

2）在 MaterialApp 中設置本地化代理和支持的語言類型；

（1）將 maxLength 設置為 null 僅使用 LengthLimitingTextInputFormatter 限制最長字符；

（2）設置 InputDecoration 中 decoration 屬性為空；但是底部有空余，只是隱藏而并非消失；

九、Flutter之webview

Flutter的webview常用的第三方庫有 flutter_webview_plugin 、 webview_flutter ，后者的文檔較少，暫先學習flutter_webview_plugin。

添加依賴

導入包

iOS端info.plist配置，其中NSAppTransportSecurity節(jié)點是為了支持http協(xié)議

一個簡單的demo

要監(jiān)聽鏈接跳轉的話，實現(xiàn)onUrlChanged即可

添加依賴

導入包

iOS端info.plist配置

一個簡單的demo

但是在webview里點擊鏈接跳轉的時候，測試機有時會跳轉到系統(tǒng)瀏覽器上，并且點擊文本框無法彈出鍵盤，交互性很弱。

二者共同的缺點是與javascript難以交互，目前只能實現(xiàn)Flutter-JS傳遞信息，還沒找到可以進行完美交互的第三方庫。并且一些常見的協(xié)議還不支持，比如撥號和調用攝像頭等，期待后續(xù)完善。

Flutter 軟鍵盤遮擋dialog

當dialog里需要輸入框彈出軟鍵盤時，會造成遮擋問題

首先應該考慮用Scaffold當根布局將其背景設置為透明色

然后包裹Center 使dialog全屏居中

最后包裹自己的dialog內容

本文名稱：flutter彈出框,flutter 下拉選擇框
分享鏈接：http://chinadenli.net/article25/dsisgji.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供虛擬主機、品牌網站建設、網站建設、App開發(fā)、網站制作、全網營銷推廣

廣告

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