flutter对话框dialog的使用

基本属性介绍

const AlertDialog({
   
  Key? key,
  this.title, //对话框标题组件
  this.titlePadding, // 标题填充
  this.titleTextStyle, //标题文本样式
  this.content, // 对话框内容组件
  this.contentPadding = const EdgeInsets.fromLTRB(24.0, 20.0, 24.0, 24.0), //内容的填充
  this.contentTextStyle,// 内容文本样式
  this.actions, // 对话框操作按钮组
  this.backgroundColor, // 对话框背景色
  this.elevation,// 对话框的阴影
  this.semanticLabel, //对话框语义化标签(用于读屏软件)
  this.shape, // 对话框外形
})

显示dialog：

• showDialog

Future<T?> showDialog<T>({
   
  required BuildContext context,
  required WidgetBuilder builder,//需要显示的弹窗
  bool barrierDismissible = true,//点击背后蒙层是否关闭弹框，默认为 true
  Color? barrierColor = Colors.black54,//背后蒙层颜色
  String? barrierLabel,
  bool useSafeArea = true,//是否使用安全区域，默认为 true
  bool useRootNavigator = true,//是否使用根导航，默认为 true
  RouteSettings? routeSettings,//路由设置
}) 

• showCupertinoDialog 也是控制 Dialog 弹出的 api。其实与 showDialog 一样，两者都可以调用各种弹框，但是 showCupertinoDialog 默认是不可以点击空白区域隐藏的。

Future<T?> showCupertinoDialog<T>({
   
  required BuildContext context,
  required WidgetBuilder builder,//需要显示的弹窗
  String? barrierLabel,
  bool useRootNavigator = true,//是否使用根导航，默认为 true
  bool barrierDismissible = false,//点击背后蒙层是否关闭弹框，默认为 false
  RouteSettings? routeSettings,//路由设置
})

AlertDialog

class _DialogApp extends StatelessWidget {
   
  @override
  Widget build(BuildContext context) => const MaterialApp(
        home: Scaffold(
          body: _DialogWidget(),
        ),
      );
}

class _DialogWidget extends StatelessWidget {
   
  const _DialogWidget({
   Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
   
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          TextButton(
            onPressed: () async {
   
              var dialog = await _show(context);
              print(dialog);
            },
            child: const Text('确定取消'),