Dialog介绍
Dialog 底层其实是对AlertDialog进行了封装, 一般用于二次确认的弹出框,比如当点击某个按钮提交资料时,需要用户二次确认,以防止误操作。
Dialog使用
第一步:应用程序入口设置
当我们导入依赖后,在应用程序顶层把GetMaterialApp 作为顶层,如下所示
import 'package:flutter/material.dart';
import 'package:flutter_getx_example/DialogExample/DialogExample.dart';
import 'package:get/get.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return GetMaterialApp(
title: "GetX",
home: DialogExample(),
);
}
}
第二步:调用Dialog
我们可以通过Get.defaultDialog() 来显示 dialog ,如下所示
import 'package:flutter/material.dart';
import 'package:get/get.dart';
class DialogExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("GetX Title"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
ElevatedButton(
onPressed: () {
Get.defaultDialog();
},
child: Text("显示 Dialog"))
],
),
),
);
}
}
效果展示
如果您运行了代码,那么恭喜你,你已经会用GetX 来展示dialog 了。你将得到下面的结果
Dialog属性和说明
总共25个属性
字段 属性 描述
title String 弹出的标题,默认(Alert)
titlePadding EdgeInsetsGeometry 标题的内边距,默认(EdgeInsets.all(8))
titleStyle TextStyle 标题的样式
middleText String 中间内容区域显示的文字
middleTextStyle TextStyle 中间内容区域显示的文字样式
content Widget 弹出的内容,该值设置后middleText将无效
contentPadding EdgeInsetsGeometry 内容的内边距,默认(EdgeInsets.all(8))
onConfirm VoidCallback 确认按钮回调
onCancel VoidCallback 取消按钮回调
onCustom VoidCallback 自定义按钮回调
cancelTextColor Color 取消按钮文字的颜色
confirmTextColor Color 确认按钮文字的颜色
textConfirm String 确认按钮的文字
textCancel String 取消按钮的文字
textCustom String 自定义按钮的文字
confirm Widget 确认按钮的组件
cancel Widget 取消按钮的组件
custom Widget 自定义按钮的组件
backgroundColor Color 弹出框的背景颜色
barrierDismissible bool 是否可以通过点击背景关闭弹窗
buttonColor Color 按钮的文字颜色,根据按钮类型来设定不同的位置
radius double 弹出框的圆角大小,默认20
actions List 增加额外的子组件
onWillPop WillPopCallback 拦截关闭之前做一些操作
navigatorKey GlobalKey 用于打开对话框的key
转自:https://liujunmin.com/