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"))
],
),
),
);
}
}
效果展示
Dialog属性和说明
序列号 | 字段 | 属性 | 描述 |
---|---|---|---|
1 | title | String | 弹出的标题,默认(Alert) |
2 | titlePadding | EdgeInsetsGeometry | 标题的内边距,默认(EdgeInsets.all(8)) |
3 | titleStyle | TextStyle | 标题的样式 |
4 | middleText | String | 中间内容区域显示的文字 |
5 | middleTextStyle | TextStyle | 中间内容区域显示的文字样式 |
6 | content | Widget | 弹出的内容,该值设置后middleText将无效 |
7 | contentPadding | EdgeInsetsGeometry | 内容的内边距,默认(EdgeInsets.all(8)) |
8 | onConfirm | VoidCallback | 确认按钮回调 |
9 | onCancel | VoidCallback | 取消按钮回调 |
10 | onCustom | VoidCallback | 自定义按钮回调 |
11 | cancelTextColor | Color | 取消按钮文字的颜色 |
12 | confirmTextColor | Color | 确认按钮文字的颜色 |
13 | textConfirm | String | 确认按钮的文字 |
14 | textCancel | String | 取消按钮的文字 |
15 | textCustom | String | 自定义按钮的文 |
16 | confirm | Widget | 确认按钮的组件 |
17 | cancel | Widget | 取消按钮的组件 |
18 | custom | Widget | 自定义按钮的组件 |
19 | backgroundColor | Color | 弹出框的背景颜色 |
20 | barrierDismissible | bool | 是否可以通过点击背景关闭弹窗 |
21 | buttonColor | Color | 按钮的文字颜色,根据按钮类型来设定不同的位置 |
22 | radius | double | 弹出框的圆角大小,默认20 |
23 | actions | List | 增加额外的子组件 |
24 | onWillPop | WillPopCallback | 拦截关闭之前做一些操作 |
25 | navigatorKey | GlobalKey | 用于打开对话框的key |