Flutter---showCupertinoDialog

核心特点

①半透明背景

②圆角设计

③平滑动画

④自适应深色模式

方法签名

Future<T?> showCupertinoDialog<T>({
  required BuildContext context,
  required WidgetBuilder builder,
  bool barrierDismissible = true,
  String? barrierLabel,
  RouteSettings? routeSettings,
})

实现的简单案例

实现的具体代码

// 显示对话框的方法
  void _showDeleteDialog() {
    showCupertinoDialog(
      context: context,
      builder: (context) => CupertinoAlertDialog(
        title: const Text("提示"), //对话框标题
        content: const Text("确定要删除吗？"),//对话框内容
        actions: [
          CupertinoDialogAction(
            child: const Text("取消"),//取消按钮
            onPressed: () => Navigator.pop(context),
          ),
          CupertinoDialogAction(
            child: const Text("确认"),//确认按钮
            onPressed: () => deleteItem(),
          ),
        ],
      ),
    );
  }

实现的完整代码

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class HomePage extends StatefulWidget{
  const HomePage({super.key});

  @override
  State<StatefulWidget> createState() => _HomePageState();

}

class _HomePageState extends State<HomePage>{

  // 删除项目的方法
  void deleteItem() {
    Navigator.pop(context); // 关闭对话框
    // 这里添加删除逻辑的具体逻辑
    print("项目已删除");
  }

  // 显示对话框的方法
  void _showDeleteDialog() {
    showCupertinoDialog(
      context: context,
      builder: (context) => CupertinoAlertDialog(
        title: const Text("提示"), //对话框标题
        content: const Text("确定要删除吗？"),//对话框内容
        actions: [
          CupertinoDialogAction(
            child: const Text("取消"),//取消按钮
            onPressed: () => Navigator.pop(context),
          ),
          CupertinoDialogAction(
            child: const Text("确认"),//确认按钮
            onPressed: () => deleteItem(),
          ),
        ],
      ),
    );
  }

  //UI构建
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
           // const Text("home页面"),
            const SizedBox(height: 20),
            CupertinoButton(
              onPressed: _showDeleteDialog,//给按钮引入点击删除事件
              child: const Text("删除对话框"),
            ),
          ],
        ),


      ),
    );
  }

}

核心组件

CupertinoAlertDialog

典型结构

CupertinoAlertDialog(
  title: Text("标题"),
  content: Text("内容文本"),
  actions: [
    CupertinoDialogAction(...),
    CupertinoDialogAction(...),
  ],
)

CupertinoDialogAction是对话框操作按钮

可以设置关键属性

isDefaultAction: true, // 文字会加粗显示，强调样式（通常用于确认），
isDestructiveAction: true, // 文字显示为红色，警示样式（红色文字）

效果图为