Flutter 初识：对话框和弹出层

最新推荐文章于 2025-03-12 10:45:12 发布

数星星的磊

最新推荐文章于 2025-03-12 10:45:12 发布

阅读量2.3k

点赞数 22

分类专栏： Flutter 初识文章标签： flutter windows

本文链接：https://blog.csdn.net/yang_6799/article/details/139377294

版权

Flutter对话框和弹出层小结

对话框

AlertDialog

AlertDialog 是一个 Flutter widget，用于显示弹出式对话框，通常用于向用户显示重要信息或要求他们进行一些确认操作。

属性解析

const AlertDialog({
    super.key,
    this.icon,
    this.iconPadding,
    this.iconColor,
    this.title,
    this.titlePadding,
    this.titleTextStyle,
    this.content,
    this.contentPadding,
    this.contentTextStyle,
    this.actions,
    this.actionsPadding,
    this.actionsAlignment,
    this.actionsOverflowAlignment,
    this.actionsOverflowDirection,
    this.actionsOverflowButtonSpacing,
    this.buttonPadding,
    this.backgroundColor,
    this.elevation,
    this.shadowColor,
    this.surfaceTintColor,
    this.semanticLabel,
    this.insetPadding = _defaultInsetPadding,
    this.clipBehavior = Clip.none,
    this.shape,
    this.alignment,
    this.scrollable = false,
  })

key
类型：Key?
说明：控件的键值，用于标识控件。
icon
类型：Widget?
说明：对话框顶部的图标。
iconPadding
类型：EdgeInsetsGeometry?
说明：图标的内边距。
iconColor
类型：Color?
说明：图标的颜色。
title
类型：Widget?
说明：对话框的标题。
titlePadding
类型：EdgeInsetsGeometry?
说明：标题的内边距。
titleTextStyle
类型：TextStyle?
说明：标题的文本样式。
content
类型：Widget?
说明：对话框的内容。
contentPadding
类型：EdgeInsetsGeometry?
说明：内容的内边距。
contentTextStyle
类型：TextStyle?
说明：内容的文本样式。
actions
类型：List?
说明：对话框底部的动作按钮列表。
actionsPadding
类型：EdgeInsetsGeometry?
说明：动作按钮的内边距。
actionsAlignment
类型：MainAxisAlignment?
说明：动作按钮的对齐方式。
actionsOverflowAlignment
类型：OverflowBarAlignment?
说明：动作按钮在溢出时的对齐方式。
actionsOverflowDirection
类型：VerticalDirection?
说明：动作按钮溢出时的排列方向。
actionsOverflowButtonSpacing
类型：double?
说明：动作按钮在溢出时的间隔。
buttonPadding
类型：EdgeInsetsGeometry?
说明：按钮的内边距。
backgroundColor
类型：Color?
说明：对话框的背景颜色。
elevation
类型：double?
说明：对话框的阴影高度。
shadowColor
类型：Color?
说明：对话框阴影的颜色。
surfaceTintColor
类型：Color?
说明：表面色调的颜色（用于材料设计3）。
semanticLabel
类型：String?
说明：屏幕阅读器使用的语义标签。
insetPadding
类型：EdgeInsets
说明：对话框与屏幕边缘的间距。
clipBehavior
类型：Clip
说明：对话框的剪裁行为。
shape
类型：ShapeBorder?
说明：对话框的外形。
alignment
类型：AlignmentGeometry?
说明：对话框相对于其父控件的对齐方式。
scrollable
类型：bool
说明：如果内容超出可视区域，是否应该滚动。默认为 false。

备注：通过会配合其他使用，示例下面会给出。

showDialog

showDialog<T?> 是一个 Flutter 方法，用于显示模态对话框。

属性解析

Future<T?> showDialog<T>({
  required BuildContext context,
  required WidgetBuilder builder,
  bool barrierDismissible = true,
  Color? barrierColor,
  String? barrierLabel,
  bool useSafeArea = true,
  bool useRootNavigator = true,
  RouteSettings? routeSettings,
  Offset? anchorPoint,
  TraversalEdgeBehavior? traversalEdgeBehavior,
})

context (required):
类型：BuildContext
说明：表示对话框所处的上下文，通常来自当前 widget。
builder (required):
类型：WidgetBuilder
说明：用于构建对话框内容的函数。它传递一个 BuildContext 并返回一个 Widget，这通常是对话框的主体。
barrierDismissible:
类型：bool
说明：指示用户点击屏幕背景（对话框外部）时是否关闭对话框。默认为 true。
barrierColor:
类型：Color?
说明：对话框背景障碍物（屏幕其余部分）的颜色。
barrierLabel:
类型：String?
说明：屏障的语义标签，用于无障碍功能。
useSafeArea:
类型：bool
说明：是否考虑安全区域（如异形屏幕的凹槽、状态栏等）。默认为 true。
useRootNavigator:
类型：bool
说明：是否使用根导航器来推送对话框。默认为 true。
routeSettings:
类型：RouteSettings?
说明：传递给对话框路由的配置信息，如名称和参数。
anchorPoint:
类型：Offset?
说明：指定对话框弹出的锚点位置。
traversalEdgeBehavior:
类型：TraversalEdgeBehavior?
说明：定义对话框边缘遍历行为。

示例

Future<void> _showMyDialog(BuildContext context) async {
  return showDialog<void>(
    context: context,
    barrierDismissible: false, // 设置为false，点击背景不会关闭
    builder: (BuildContext context) {
      return AlertDialog(
        title: Text('Dialog Title'),
        content: SingleChildScrollView(
          child: ListBody(
            children: <Widget>[
              Text('This is a simple dialog.'),
              Text('Would you like to approve of this message?'),
            ],
          ),
        ),
        actions: <Widget>[
          TextButton(
            child: Text('Approve'),
            onPressed: () {
              Navigator.of(context).pop();
            },
          ),
          TextButton(
            child: Text('Cancel'),
            onPressed: () {
              Navigator.of(context).pop();
            },
          ),
        ],
      );
    },
  );
}

在这里插入图片描述

SimpleDialog

showDialog 是一个 Flutter 方法，用于显示模态对话框。

示例

showDialog(
              context: context,
              builder: (BuildContext context) {
                return SimpleDialog(
                  title: Text('选择一个选项'),
                  children: <Widget>[
                    SimpleDialogOption(
                      onPressed: () {
                        Navigator.pop(context, '选项1');
                      },
                      child: Text('选项1'),
                    ),
                    SimpleDialogOption(
                      onPressed: () {
                        Navigator.pop(context, '选项2');
                      },
                      child: Text('选项2'),
                    ),
                  ],
                );
              },
            );

在这里插入图片描述

AboutDialog

AboutDialog用于显示应用程序的相关信息，例如版本号、作者等。

属性解析

void showAboutDialog({
  required BuildContext context,
  String? applicationName,
  String? applicationVersion,
  Widget? applicationIcon,
  String? applicationLegalese,
  List<Widget>? children,
  bool barrierDismissible = true,
  Color? barrierColor,
  String? barrierLabel,
  bool useRootNavigator = true,
  RouteSettings? routeSettings,
  Offset? anchorPoint,
})

context (required)
类型：BuildContext
说明：表示对话框所处的上下文，通常来自当前 widget。
applicationName
类型：String?
说明：应用程序的名称。如果未提供，将使用 DefaultWidgetsLocalizations.of(context).appName。
applicationVersion
类型：String?
说明：应用程序的版本。
applicationIcon
类型：Widget?
说明：应用程序的图标。
applicationLegalese
类型：String?
说明：应用程序的法律声明。
children
类型：List?
说明：在对话框中显示的额外小部件。
barrierDismissible
类型：bool
说明：指示用户点击屏幕背景（对话框外部）时是否关闭对话框。默认为 true。
barrierColor
类型：Color?
说明：弹出框背景障碍物（屏幕其余部分）的颜色。
barrierLabel
类型：String?
说明：屏障的语义标签，用于无障碍功能。
useRootNavigator
类型：bool
说明：是否使用根导航器来推送对话框。默认为 true。
routeSettings
类型：RouteSettings?
说明：传递给对话框路由的配置信息，如名称和参数。
anchorPoint
类型：Offset?
说明：指定对话框弹出的锚点位置。

示例

showAboutDialog(
              context: context,
              applicationName: 'My Application',
              applicationVersion: '1.0.0',
              applicationIcon: Icon(Icons.info, size: 48.0),
              applicationLegalese: '© 2023 My Company. All rights reserved.',
              children: <Widget>[
                Padding(
                  padding: const EdgeInsets.only(top: 16.0),
                  child: Text('This is a custom about dialog.'),
                ),
              ],
              barrierDismissible: false, // 用户点击对话框外部时不会关闭对话框
              barrierColor: Colors.black54, // 设置半透明的背景颜色
            );

在这里插入图片描述
&nsbp;

Custom Full-Screen Dialog

有时候你可能需要一个全屏对话框，这可以通过设置barrierColor和backgroundColor来实现：

示例

body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                  fullscreenDialog: true,
                  builder: (context) => FullScreenDialog()),
            );
          },
          child: Text('显示全屏对话框'),
        ),
      ),


class FullScreenDialog extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('全屏对话框'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.of(context).pop();
          },
          child: Text('关闭'),
        ),
      ),
    );
  }
}

在这里插入图片描述

带动画效果的CustomDialog（showGeneralDialog）

showGeneralDialog 是一个 Flutter 方法，用于显示自定义对话框。它提供了更多的灵活性，可以自定义对话框的内容、过渡动画等。

属性解析

Future<T?> showGeneralDialog<T extends Object?>({
  required BuildContext context,
  required RoutePageBuilder pageBuilder,
  bool barrierDismissible = false,
  String? barrierLabel,
  Color barrierColor = const Color(0x80000000),
  Duration transitionDuration = const Duration(milliseconds: 200),
  RouteTransitionsBuilder? transitionBuilder,
  bool useRootNavigator = true,
  RouteSettings? routeSettings,
  Offset? anchorPoint,
})

context (required)
类型：BuildContext
说明：表示对话框所处的上下文，通常来自当前 widget。
pageBuilder (required)
类型：RoutePageBuilder
说明：构建对话框内容的小部件构造器。在这个函数中返回一个 Widget，即对话框的内容。
barrierDismissible
类型：bool
说明：指示用

最低0.47元/天解锁文章