Flutter之Dialog 對話框各種用法

前言:

各位同學大家好 ,相信移動端(安卓, iOS )和前端的同學都有使用過dialog對話框 ,移動端(安卓 iOS )和前端 對于diaog 的實現 都有很好用的對應的原生api支持, 網上也有很多開源博客 我這邊就不展開詳細講了,今天給大家分享一下flutter中dialog對話框的各種用法 。

準備工作:

安裝flutter環境 如果只是跑安卓設備 win系統就行了 要是同時運行安卓和iOS 就需要mac電腦了 配置環境變量這邊就不展開講了大家可以看我之前的文章

需要用到的三方庫

fluttertoast: ^3.1.3 toast 庫

效果圖

alertDialog:

QQ截圖20200531131836.png

simpleDialog:

QQ截圖20200531131903.png
QQ截圖20200531131851.png
QQ截圖20200531131911.png

modeBottomDialog:

QQ截圖20200531131929.png

toastDialog:

QQ截圖20200531131945.png

自定義LoadingDialog (網絡加載) :

QQ截圖20200531132014.png

具體代碼實現:

alertDialog:

alertDialog警報對話框會通知用戶需要確認的情況。警報對話框具有可選標題和可選的操作列表。標題顯示在內容上方,操作顯示在內容下方。通常我們在點擊一些需要用戶確認操作的功能(例如刪除,等 )的時候就會用到這個alertDialog 警報對話框。

如圖:

QQ截圖20200531131836.png

alertDialog的代碼實現 :

  Future  _alertDialog()async{
    var  result  =await showDialog(
        context: context,
        builder: (context){
          return  AlertDialog(
            title: Text("提示信息"),
            content: Text("您確定要刪除嗎"),
            actions: <Widget>[
              RaisedButton(
                child: Text("取消"),
                color: Colors.blue,
                textColor: Colors.white,
                onPressed: (){
                  print("取消");
                  Toast.show("你取消了", context);
                  Navigator.pop(context);
                },
              ),
              RaisedButton(
                child: Text("確定"),
                color: Colors.blue,
                textColor: Colors.white,
                onPressed: (){
                  print("確定");
                  Toast.show("你確定了", context);
                  Navigator.pop(context,"ok");
                },
              ),
            ],
          );
        }
    );
    print("result   -- >  "+result);
  return  result;
  }

這邊我們定義了_alertDialog 方法 然后在里面調用了showDialog()組件 返回一個 AlertDialog()組件
AlertDialog()組件中我們設置 title 和content , 然后 actions 屬性中插入 兩個RaisedButton 來處理對話框里點擊的操作, 通過調用Navigator.pop(context); 來處理 對話框架 點擊銷毀 以及點擊拿的結果 最我們將選擇項點擊的操的結果賦值給 var result 變量并返回 。

具體 _alertDialog ()方法的調用

  Widget build(BuildContext context) {
    // TODO: implement build
    return  Scaffold(
      appBar: AppBar(
        title: Text("alertDialog彈出演示"),
      ),
      body: Container(
        child: RaisedButton(
          child: Text(
              "點擊顯示alertDialog"
          ),
          onPressed: (){
            _alertDialog().then((value){
              print(value);
            });
          },
        ),
      ),
    );
  }

simpleDialog:

簡單的對話框為用戶提供了多個選項之間的選擇。一個簡單的對話框有一個可選的標題,顯示在選項上方。下面則是具體的選擇項 ,通常我們在項目中用這個simpleDialog 來實現一些列表選擇則的功能的實現 。

如圖:

QQ截圖20200531131903.png
QQ截圖20200531131851.png
QQ截圖20200531131911.png

simpleDialog的代碼實現 :

 Future  simpleDialog()async{
    var  result=await showDialog(context: context,
        builder:(context){
          return SimpleDialog(
            title: Text("選擇角色"),
            children: <Widget>[
              SimpleDialogOption(
                child: Text("旋渦名人"),
                onPressed: (){
                  print("旋渦名人");
                  Navigator.pop(context,"旋渦名人");
                },
              ),
              SimpleDialogOption(
                child: Text("宇智波佐助 "),
                onPressed: (){
                  print("宇智波佐助");
                  Navigator.pop(context,"宇智波佐助");
                },
              ),
              SimpleDialogOption(
                child: Text("千手柱間"),
                onPressed: (){
                  print("千手柱間");
                  Navigator.pop(context,"千手柱間");
                },
              ),
              SimpleDialogOption(
                child: Text("宇智波斑"),
                onPressed: (){
                  print("宇智波斑");
                  Navigator.pop(context,"宇智波斑");
                },
              ),
            ],
          );
        }
    );
    print("result --- > "+result);
    return result;
  }

這邊我們定義了simpleDialog方法 然后在里面調用了showDialog()組件 返回一個 SimpleDialog()組件
SimpleDialog()組件中我們設置 title , 然后通過 children屬性中插入 多個SimpleDialogOption來處理對話框里面的選擇項的操作 通過調用Navigator.pop(context); 來處理 對話框架 點擊銷毀 以及點擊拿的結果 最我們將選擇項點擊的操的結果賦值給 var result 變量并返回

具體調用:

@override
Widget build(BuildContext context) {
  // TODO: implement build
  return Scaffold(
    appBar: AppBar(
      title: Text("simpleDialog "),

    ),
    body: Container(
      color: Colors.white,
      child: Center(
        child: RaisedButton(
          child: Text(textStr),
          onPressed:(){
            simpleDialog().then((value){
              setState(() {
                if(!textStr.isEmpty){
                  textStr=value;
                }
              });
            });
          } ,
        ),
      ),
    ),
  );
}

通過調用 simpleDialog方法的 then屬性拿到返回的結果 然后賦值給我們點擊的RaisedButton 的Text 里面的變量

  onPressed:(){
       simpleDialog().then((value){
          setState(() {
              if(!textStr.isEmpty){
                 textStr=value;
                  }
            });
         });
   }

modeBottomDialog:

modeBOttomDialog 通常我用來實現一鍵分享的功能的實現 (如分享到微信 微博 QQ等 )

如圖:

QQ截圖20200531145448.png

具體代碼實現:

  Future   _modeBottomDialog()async{
    var  result=await showModalBottomSheet(context: context,
        builder: (context){
          return Container(
            child: Column(
              children: <Widget>[
                ListTile(
                    title: Text("分享到 QQ"),
                    onTap: (){
                      Navigator.pop(context,"分享到 QQ");
                    }
                ),
                ListTile(
                    title: Text("分享到 微信 "),
                    onTap: (){
                      Navigator.pop(context,"分享到 微信");
                    }
                ),
                ListTile(
                    title: Text("分享到 微博"),
                    onTap: (){
                      Navigator.pop(context,"分享到 微博");
                    }
                ),
                ListTile(
                    title: Text("分享到 知乎"),
                    onTap: (){
                      Navigator.pop(context,"分享到 知乎");
                    }
                ),
              ],
            ),
          );
        }
    );
    print("分享 --- > "+result);
   return result;
  }

這邊我們定義了_modeBottomDialog方法 然后在里面調用了showModalBottomSheet()組件, 傳入context 上下文返回一個 widget。(widget 你想要返回 什么樣看你自己發揮 這我返回一個 Container 里面包裹一個 Column)然后我們再Column 的 children 里面插入多條ListTitle 來顯示分享的點擊條目,同simple 一樣通過調用Navigator.pop(context,"分享到 知乎"); 來處理 對話框架 點擊銷毀 以及點擊拿的結果 最我們將選擇項點擊的操的結果賦值給 var result 變量并返回。

具體調用:

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("modeBOttomDialog"),
      ),
      body: Container(
        child: RaisedButton(
          child: Text("分享"
          ),
          onPressed: (){
            _modeBottomDialog().then((value){
              print("value    ---  > "+value  );
            });
          },
        ),
      ),
    );
  }

toastDialog:

toastDialog 是平時用來做提示的 toast 信息實現 (例如, 賬號密碼不能為空 ,賬號或者密碼不對 )
toastDialog 這個需要用到三方庫 fluttertoast: ^3.1.3 我們先要在 pubspec.yaml 中添加依賴

QQ截圖20200531153402.png

然后執行 在控制臺 執行flutter pub get 下載依賴
使用需要導入這個包

import 'package:fluttertoast/fluttertoast.dart';

toastDialog具體代碼實現 :

_toast()async{
    Fluttertoast.showToast(
        msg: "This is Center Short Toast",  //彈出內容
        toastLength: Toast.LENGTH_SHORT, //彈出時間長短 
        gravity: ToastGravity.CENTER, //彈出位置  上 下  中   
        timeInSecForIos: 3,  //在什么平臺上面使用  安卓  IOS  Web
        backgroundColor: Colors.black, // 背景顏色
        textColor: Colors.white, //字體顏色
        fontSize: 16.0 //字體大小 
    );

我們調用三方庫里面的 showToast ()組件反別設置

        msg: "This is Center Short Toast",  //彈出內容
        toastLength: Toast.LENGTH_SHORT, //彈出時間長短 
        gravity: ToastGravity.CENTER, //彈出位置  上 下  中   
        timeInSecForIos: 3,  //在什么平臺上面使用  安卓  IOS  Web
        backgroundColor: Colors.black, // 背景顏色
        textColor: Colors.white, //字體顏色
        fontSize: 16.0 //字體大小 

各個屬性來滿足我們實際需求

具體調用:

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
         title: Text("_toastDialogState"),
      ),
      body: Container(
        child: Column(
          children: <Widget>[
            RaisedButton(
              child: Text("點擊彈出toast"),
              onPressed: _toast,
            ),
            RaisedButton(
              child: Text("調用封裝的方法彈出"),
              onPressed:  ()async{
                ToastUtil.showInfo("顯示toast");
              },
            )
          ],
        )
      ),
    );
  }

我們也可以對toast進行適當的封裝

import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';

class   ToastUtil{
   static  void   showInfo(String  str)async {
     Fluttertoast.showToast(
         msg: str,
         toastLength: Toast.LENGTH_SHORT,
         gravity: ToastGravity.CENTER,
         timeInSecForIos: 3,
         backgroundColor: Colors.black,
         textColor: Colors.white,
         fontSize: 16.0
     );
   }
}

然后再其他類只需要導入我這個工具類就行了
直接調用:

    RaisedButton(
              child: Text("調用封裝的方法彈出"),
              onPressed:  ()async{
                ToastUtil.showInfo("顯示toast");
              },
     )

自定義 LoadingDialog(網絡加載對話框):

通常我們再加載網絡 請求后臺的數據展示再我們的app上面的時候 這個過程需要一定的時間
所以這個時候我們需要做一個loadingDialog 頁面來處理 這個等待的過程

如圖:

QQ截圖20200531132014.png

具體代碼實現:

import 'package:flutter/material.dart';
class LoadingDialog extends Dialog {
  String text;
  LoadingDialog({Key key, @required this.text}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return new Material(
      //創建透明層
      type: MaterialType.transparency, //透明類型
      child: new Center(
        //保證控件居中效果
        child: new SizedBox(
          width: 100.0,
          height: 100.0,
          child: new Container(
            decoration: ShapeDecoration(
              color: Color(0xffffffff),
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.all(
                  Radius.circular(8.0),
                ),
              ),
            ),
            child: new Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                new CircularProgressIndicator(),
                new Padding(
                  padding: const EdgeInsets.only(
                    top: 20.0,
                  ),
                  child: new Text(
                    text,
                    style: new TextStyle(fontSize: 12.0),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

這里我們自己創建一個loadingDialog 需要繼承flutter sdk 里面的Dialog 然后重寫 build 方法 需要返回一個widget
我們這里返回Material 來設置透明效果 然后再里面嵌套 Center 來使得我們的要展示的內容居中顯示
然后創建 Sizebox 盒子模型組件 設置寬高 各100的正方形 來裝載我們顯示的的內容
我們通過 ShapeDecoration 組件來實現 loading 動畫效果
在下面我們加一個text顯示我們需要顯示的提示的文字 (加載中 等待中 等等 )

具體調用 :

我們需要寫一個 showCustomDialog 方法來轉載我們的loadingDialog

  void showCustomDialog(BuildContext context) {
    showDialog(
        context: context,
        builder: (BuildContext context) {
          return LoadingDialog(text: "加載中");
        });
  }

然后我們在具體的業務邏輯中的widget 或者網絡請求中調用

import 'package:flutter/material.dart';
import '../dialog/loading_dialog.dart';

class LoagingWidget extends StatefulWidget {
  LoagingWidget({Key key}) : super(key: key);

  @override
  _LoagingWidgetState createState() {
    return _LoagingWidgetState();
  }
}

class _LoagingWidgetState extends State<LoagingWidget> {
  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return  Scaffold(
      appBar: AppBar(
        title: Text("網絡加載loading"),

      ),
      body: Container(
        child: RaisedButton(
          child: Text("點擊加載"),
          onPressed: (){
            setState(() {
              showCustomDialog(context);
            });
          },
        ),
      ),
    );
  }
  void showCustomDialog(BuildContext context) {
    showDialog(
        context: context,
        builder: (BuildContext context) {
          return LoadingDialog(text: "加載中");
        });
  }
}

關閉對話框 通過調用 Navigator.pop(context) 來關閉

Navigator.pop(context);

到此flutter 中dialog 的各種用法就介紹完了 如果有錯誤或者遺漏的地方希望各位同學及時指正
項目地址:https://github.com/xq19930522/flutter_dialog_demo.git

最后總結 :

flutter中的dialog提供的api比較豐富 例如 alertDialog simpleDialog modeBottomDialog toastDialog
這些都可以實現很多功能的需求 這些dialog我們都可以自己自定義dialog 繼承flutter sdk里面的Dialog來實現的 有興趣的同學可以自己在私下研究 這里就不過多講了 最后希望我的文章能幫助到各位解決問題,各位同學如果覺得文章還不錯 ,麻煩給關注和star,小弟在這里謝過啦

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
禁止轉載,如需轉載請通過簡信或評論聯系作者。