Flutter中如何从其他Widget的onPressed事件调用自定义AlertDialog

实现方案 #

你可以将原有组件改造为通用弹窗工具类，暴露公开的静态触发方法，完全剥离内置按钮逻辑，可在任意位置直接调用弹窗，改造代码如下：

// 改造后的通用弹窗工具类
class AppAlertDialog {
  // 对外暴露的静态弹窗触发方法
  static void show({
    required BuildContext context,
    required String title,
    required String content,
    required String secondaryButtonName,
    required String primaryButtonName,
    // 可扩展自定义回调参数，满足不同业务逻辑需求
    VoidCallback? onSecondaryButtonTap,
    VoidCallback? onPrimaryButtonTap,
  }) {
    final titleTextStyle = Theme.of(context).textTheme.headline5!;
    const buttonPadding = EdgeInsets.all(20);

    showDialog(
      context: context,
      builder: (BuildContext context) => AlertDialog(
        title: Text(
          title,
          style: titleTextStyle,
        ),
        content: Text(content),
        contentPadding: const EdgeInsets.fromLTRB(24, 24, 24, 24),
        actions: <Widget>[
          ElevatedButton(
            onPressed: () {
              Navigator.pop(context);
              if (onSecondaryButtonTap != null) onSecondaryButtonTap();
            },
            style: ElevatedButton.styleFrom(
              padding: buttonPadding,
              primary: SharedColorsButton.secondaryButtonBgColor,
              onPrimary: SharedColorsButton.secondaryButtonFgColor,
              side: const BorderSide(
                color: SharedColorsInputDecoration.borderColor,
              ),
            ),
            child: Text(secondaryButtonName),
          ),
          ElevatedButton(
            style: ElevatedButton.styleFrom(
              padding: buttonPadding,
            ),
            onPressed: () {
              Navigator.pop(context);
              if (onPrimaryButtonTap != null) onPrimaryButtonTap();
            },
            child: Text(primaryButtonName),
          ),
        ],
        actionsPadding: const EdgeInsets.fromLTRB(24, 16, 24, 16),
      ),
    );
  }
}

调用示例 #

在其他文件的Widget的onPressed方法中直接调用即可弹出弹窗：

ElevatedButton(
  onPressed: () {
    AppAlertDialog.show(
      context: context,
      title: '操作提示',
      content: '确认执行该操作吗？',
      secondaryButtonName: '取消',
      primaryButtonName: '确认',
      onSecondaryButtonTap: () {
        // 自定义点击取消按钮的业务逻辑
      },
      onPrimaryButtonTap: () {
        // 自定义点击确认按钮的业务逻辑
      },
    );
  },
  child: const Text('执行操作'),
)

你还可以根据需求扩展更多自定义参数，比如自定义内容区域Widget、弹窗点击外部是否可关闭、自定义按钮样式等属性。

内容的提问来源于stack exchange，提问作者Nikhil Bharadwaj