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});@overrideState<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构建@overrideWidget 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, // 文字显示为红色，警示样式（红色文字）效果图为
