Flutter 自定義Dialog

我們項(xiàng)目開發(fā)中,有很多地方會(huì)用到dialog,雖然flutter自身也有,比如AboutDialog、AlertDialog、SimpleDialog、CupertinoAlertDialog等等之類的,但是這些滿足不了我們的控制欲,我們想要的是它可以根據(jù)我們的想法而隨改變,并不是那么死板,所以呢,就想到封裝好多的組件來用,一來,提高了它的靈活性,二來,可以分享給他人使用,三來,可以提高自身對(duì)于flutter 的進(jìn)一步認(rèn)識(shí)等等,總之呢,一句話,封裝肯定比不封裝好的很多,廢話不多說,直接上代碼:

image

61888FC43B1C6D8E155E81E04B155C06.png

7DAAFF6EBB20C7DB1A856D875BF82EBF.png
class CustomDialog extends Dialog {
  final double width; // 寬度
  final double height; // 高度
  final String title; // 頂部標(biāo)題
  final String content; // 內(nèi)容
  final String cancelTxt; // 取消按鈕的文本
  final String enterTxt; // 確認(rèn)按鈕的文本
  final Function callback; // 修改之后的回掉函數(shù)
  
  CustomDialog({
    this.width: 270,
    this.height: 141,
    this.title,
    this.content, // 根據(jù)content來,判斷顯示哪種類型
    this.cancelTxt: "取消",
    this.enterTxt: "確認(rèn)",
    this.callback
  });

  @override
  Widget build(BuildContext context) {
    ScreenUtil.instance = ScreenUtil(width: 375, height: 812)..init(context); // 屏幕適配
    String _inputVal = "";

    return GestureDetector( // 點(diǎn)擊遮罩層隱藏彈框
      child: Material(
        type: MaterialType.transparency, // 配置透明度
        child: Center(
          child: GestureDetector( // 點(diǎn)擊遮罩層關(guān)閉彈框,并且點(diǎn)擊非遮罩區(qū)域禁止關(guān)閉
            onTap: () {
              print('我是非遮罩區(qū)域~');
            },
            child: Container(
              width: this.width,
              height: this.height,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10),
                color: Colors.white,
              ),
              child: Stack(
                alignment: Alignment.bottomCenter,
                children: <Widget>[
                  Visibility(
                    visible: this.content == null ? true : false,
                    child: Positioned(
                      top: 0,
                      child: Container(
                        alignment: Alignment.center,
                        margin: EdgeInsets.fromLTRB(0, 19, 0, 19),
                        child: Text(
                          "${this.title}",
                          style: TextStyle(
                            fontSize: ScreenUtil(allowFontScaling: true).setSp(17), 
                            color: Color(0xff000000),
                            fontWeight: FontWeight.w600
                          )
                        )
                      )
                    )
                  ),
                  Container(
                    padding: EdgeInsets.fromLTRB(15, 0, 15, 0),
                    alignment: Alignment.center,
                    child: this.content != null ?
                    Container(
                      width: double.infinity,
                      margin: EdgeInsets.fromLTRB(0, 0, 0, 42),
                      alignment: Alignment.center,
                      child: Text(
                        "${this.content}",
                        style: TextStyle(
                          color: Colors.black,
                          fontSize: ScreenUtil(allowFontScaling: true).setSp(17),
                          fontWeight: FontWeight.w600
                        )
                      )
                    )
                    :
                    TextField(
                      textAlignVertical: TextAlignVertical.center,
                      style: TextStyle(
                        fontSize: ScreenUtil(allowFontScaling: true).setSp(13)
                      ),
                      textInputAction: TextInputAction.send,
                      decoration: new InputDecoration(
                        hintText: '${this.title}',
                        contentPadding: const EdgeInsets.symmetric(vertical: 3.0, horizontal: 5.0),
                        enabledBorder: OutlineInputBorder( // 邊框默認(rèn)色
                          borderSide: const BorderSide(color: Color(0xffC8C7CC))
                        ),
                        focusedBorder: OutlineInputBorder( // 聚焦之后的邊框色
                          borderSide: const BorderSide(color: Color(0xfff3187D2))
                        ),
                      ),
                      onChanged: (value) {
                        _inputVal = value;
                      }
                    )
                  ),
                  Container(
                    height: 43,
                    decoration: BoxDecoration(
                      border: Border(top: BorderSide(width: 1,color: Color(0xffEFEFF4)))
                    ),
                    child: Row(
                      children: <Widget>[
                        Expanded(
                          flex: 1,
                          child: GestureDetector(
                            behavior: HitTestBehavior.opaque,
                            child: Container(
                              height: double.infinity,
                              alignment: Alignment.center,
                              decoration: BoxDecoration(
                                border: Border(right: BorderSide(width: 1,color: Color(0xffEFEFF4)))
                              ),
                              child: Text(
                                "${this.cancelTxt}",
                                textAlign: TextAlign.center,
                                style: TextStyle(
                                  color: Color(0xff007AFF),
                                  fontSize: ScreenUtil(allowFontScaling: true).setSp(17),
                                  fontWeight: FontWeight.w400
                                )
                              )
                            ),
                            onTap: () {
                              Navigator.pop(context);
                            }
                          )
                        ),
                        Expanded(
                          flex: 1,
                          child: GestureDetector(
                            behavior: HitTestBehavior.opaque,
                            child: Container(
                              height: double.infinity, // 繼承父級(jí)的高度
                              alignment: Alignment.center,
                              child: Text(
                                "${this.enterTxt}",
                                textAlign: TextAlign.center,
                                style: TextStyle(
                                  color: Color(0xff007AFF),
                                  fontSize: ScreenUtil(allowFontScaling: true).setSp(17),
                                  fontWeight: FontWeight.w600
                                )
                              )
                            ),
                            onTap: () {
                              if(this.content != null) {
                                this.callback(_inputVal); // 通過回掉函數(shù)傳給父級(jí)
                              }
                              Navigator.pop(context); // 關(guān)閉dialog
                            }
                          )
                        )
                      ]
                    )
                  )
                ]
              )
            )
          )
        )
      ),
      onTap: () {
        Navigator.pop(context);
      }
    );
  }
}

看完之后是不是感覺很簡(jiǎn)單呢,喜歡的直接拿去用吧~~,接下來,我們看看如何調(diào)用它的,其實(shí)也超簡(jiǎn)單的哦

showDialog(
  context: context,
    builder: (context) {
      return CustomDialog(
        title: '昵稱',
        enterTxt: "修改",
        callback: (res) {
          setState(() {
            this.settingData[index]['message'] = res;
          });
          this.editorToast();
        } 
      );
    }
);

以上呢就是我寫的封裝自定義dialog,歡迎大家評(píng)論,小編也是初學(xué)flutter,如有寫的不足之處,還請(qǐng)各位大佬多多指出,謝謝大家啦~

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容