前言:
各位同學大家好 ,相信移動端(安卓, iOS )和前端的同學都有使用過dialog對話框 ,移動端(安卓 iOS )和前端 對于diaog 的實現 都有很好用的對應的原生api支持, 網上也有很多開源博客 我這邊就不展開詳細講了,今天給大家分享一下flutter中dialog對話框的各種用法 。
準備工作:
安裝flutter環境 如果只是跑安卓設備 win系統就行了 要是同時運行安卓和iOS 就需要mac電腦了 配置環境變量這邊就不展開講了大家可以看我之前的文章
需要用到的三方庫
fluttertoast: ^3.1.3 toast 庫
效果圖
alertDialog:
simpleDialog:
modeBottomDialog:
toastDialog:
自定義LoadingDialog (網絡加載) :
具體代碼實現:
alertDialog:
alertDialog警報對話框會通知用戶需要確認的情況。警報對話框具有可選標題和可選的操作列表。標題顯示在內容上方,操作顯示在內容下方。通常我們在點擊一些需要用戶確認操作的功能(例如刪除,等 )的時候就會用到這個alertDialog 警報對話框。
如圖:
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 來實現一些列表選擇則的功能的實現 。
如圖:
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等 )
如圖:
具體代碼實現:
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 中添加依賴
然后執行 在控制臺 執行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 頁面來處理 這個等待的過程
如圖:
具體代碼實現:
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,小弟在這里謝過啦