Flutter---弹窗

西西学代码2025-10-23 17:50

常见的有六种

1.普通弹窗

效果图

实现代码

Dart 复制代码 
  //普通弹窗
  void showAlertDialog(BuildContext context) {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: const Text('提示'),
          content: const Text('确定要删除吗？'),
          actions: [
            TextButton(
              onPressed: () => Navigator.pop(context),
              child: const Text('取消'),
            ),
            ElevatedButton(
              onPressed: () {
                Navigator.pop(context);
                print('点击了确定');
              },
              child: const Text('确定'),
            ),
          ],
        );
      },
    );
  }

2.简单列表弹窗

效果图

实现代码

Dart 复制代码 
//简单列表弹窗
  void showSimpleDialog(BuildContext context) {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return SimpleDialog(
          title: const Text('选择语言'),
          children: [
            SimpleDialogOption(
              onPressed: () => Navigator.pop(context, '中文'),
              child: const Text('中文'),
            ),
            SimpleDialogOption(
              onPressed: () => Navigator.pop(context, 'English'),
              child: const Text('English'),
            ),
          ],
        );
      },
    );
  }

3.底部弹窗

效果图

实现代码

Dart 复制代码 
//底部弹窗
  void showBottomSheetDialog(BuildContext context) {
    showModalBottomSheet(
      context: context,
      backgroundColor: Colors.transparent, // 背景透明
      shape: const RoundedRectangleBorder(
        borderRadius: BorderRadius.vertical(top: Radius.circular(16)),
      ),
      builder: (BuildContext context) {
        return Container(
          height: 250,
          decoration: const BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.vertical(top: Radius.circular(16)),
          ),
          child: Column(
            children: [
              const SizedBox(height: 16),
              const Text('选择操作', style: TextStyle(fontSize: 18)),
              const Divider(),
              ListTile(
                leading: const Icon(Icons.edit),
                title: const Text('编辑'),
                onTap: () => Navigator.pop(context, 'edit'),
              ),
              ListTile(
                leading: const Icon(Icons.delete),
                title: const Text('删除'),
                onTap: () => Navigator.pop(context, 'delete'),
              ),
            ],
          ),
        );
      },
    );
  }

4.IOS弹窗

效果图

实现代码

Dart 复制代码 
//IOS弹窗
  void showIOSDialog(BuildContext context) {
    showCupertinoDialog(
      context: context,
      builder: (BuildContext context) {
        return CupertinoAlertDialog(
          title: const Text('iOS风格弹窗'),
          content: const Text('确定要退出吗？'),
          actions: [
            CupertinoDialogAction(
              child: const Text('取消'),
              onPressed: () => Navigator.pop(context),
            ),
            CupertinoDialogAction(
              isDestructiveAction: true,
              child: const Text('确定'),
              onPressed: () => Navigator.pop(context),
            ),
          ],
        );
      },
    );
  }

5.底部提示条

效果图

实现代码

Dart 复制代码 
//底部提示条
  void showSnackBar(BuildContext context) {
    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(
        content: Text('保存成功'),
        duration: Duration(seconds: 2),
      ),
    );
  }

5.自定义动画弹窗

效果图

实现代码

Dart 复制代码 
//自定义动画弹窗
  void showCustomDialog(BuildContext context) {
    showGeneralDialog(
      context: context,
      barrierDismissible: true,
      barrierLabel: '',
      barrierColor: Colors.black54,
      transitionDuration: const Duration(milliseconds: 300),
      pageBuilder: (context, animation1, animation2) {
        return Center(
          child: Container(
            height: 200,
            width: 300,
            padding: const EdgeInsets.all(16),
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(16),
            ),
            child: const Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Text('自定义弹窗', style: TextStyle(fontSize: 18)),
                SizedBox(height: 16),
                Text('你可以自定义动画、位置、模糊背景等。'),
              ],
            ),
          ),
        );
      },
      transitionBuilder: (context, anim1, anim2, child) {
        return FadeTransition(
          opacity: anim1,
          child: ScaleTransition(scale: anim1, child: child),
        );
      },
    );
  }

代码实例

Dart 复制代码 
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';


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

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

}

class _HomePageState extends State<HomePage> {

  @override
  void initState() {
    super.initState();


  }

  //UI构建
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Container(
          padding: EdgeInsets.only(left: 100),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              GestureDetector(
                onTap: (){
                  showAlertDialog(context);
                },
                child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children:[
                      Text("普通弹窗"),
                    ]

                ),
              ),

              SizedBox(height: 20,),
              GestureDetector(
                onTap: (){
                  showSimpleDialog(context);
                },
                child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children:[
                      Text("简单列表弹窗"),
                    ]

                ),
              ),

              SizedBox(height: 20,),
              GestureDetector(
                onTap: (){
                  showBottomSheetDialog(context);
                },
                child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children:[
                      Text("底部弹窗"),
                    ]

                ),
              ),

              SizedBox(height: 20,),
              GestureDetector(
                onTap: (){
                  showIOSDialog(context);
                },
                child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children:[
                      Text("IOS弹窗"),
                    ]

                ),
              ),

              SizedBox(height: 20,),
              GestureDetector(
                onTap: (){
                  showSnackBar(context);
                },
                child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children:[
                      Text("底部提示条"),
                    ]

                ),
              ),

              SizedBox(height: 20,),
              GestureDetector(
                onTap: (){
                  showCustomDialog(context);
                },
                child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children:[
                      Text("自定义动画弹窗"),
                    ]

                ),
              ),


            ],
          ),
        )

    );
  }

  //普通弹窗
  void showAlertDialog(BuildContext context) {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: const Text('提示'),
          content: const Text('确定要删除吗？'),
          actions: [
            TextButton(
              onPressed: () => Navigator.pop(context),
              child: const Text('取消'),
            ),
            ElevatedButton(
              onPressed: () {
                Navigator.pop(context);
                print('点击了确定');
              },
              child: const Text('确定'),
            ),
          ],
        );
      },
    );
  }

  //简单列表弹窗
  void showSimpleDialog(BuildContext context) {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return SimpleDialog(
          title: const Text('选择语言'),
          children: [
            SimpleDialogOption(
              onPressed: () => Navigator.pop(context, '中文'),
              child: const Text('中文'),
            ),
            SimpleDialogOption(
              onPressed: () => Navigator.pop(context, 'English'),
              child: const Text('English'),
            ),
          ],
        );
      },
    );
  }


  //底部弹窗
  void showBottomSheetDialog(BuildContext context) {
    showModalBottomSheet(
      context: context,
      backgroundColor: Colors.transparent, // 背景透明
      shape: const RoundedRectangleBorder(
        borderRadius: BorderRadius.vertical(top: Radius.circular(16)),
      ),
      builder: (BuildContext context) {
        return Container(
          height: 250,
          decoration: const BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.vertical(top: Radius.circular(16)),
          ),
          child: Column(
            children: [
              const SizedBox(height: 16),
              const Text('选择操作', style: TextStyle(fontSize: 18)),
              const Divider(),
              ListTile(
                leading: const Icon(Icons.edit),
                title: const Text('编辑'),
                onTap: () => Navigator.pop(context, 'edit'),
              ),
              ListTile(
                leading: const Icon(Icons.delete),
                title: const Text('删除'),
                onTap: () => Navigator.pop(context, 'delete'),
              ),
            ],
          ),
        );
      },
    );
  }

  //IOS弹窗
  void showIOSDialog(BuildContext context) {
    showCupertinoDialog(
      context: context,
      builder: (BuildContext context) {
        return CupertinoAlertDialog(
          title: const Text('iOS风格弹窗'),
          content: const Text('确定要退出吗？'),
          actions: [
            CupertinoDialogAction(
              child: const Text('取消'),
              onPressed: () => Navigator.pop(context),
            ),
            CupertinoDialogAction(
              isDestructiveAction: true,
              child: const Text('确定'),
              onPressed: () => Navigator.pop(context),
            ),
          ],
        );
      },
    );
  }

  //底部提示条
  void showSnackBar(BuildContext context) {
    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(
        content: Text('保存成功'),
        duration: Duration(seconds: 2),
      ),
    );
  }

  //自定义动画弹窗
  void showCustomDialog(BuildContext context) {
    showGeneralDialog(
      context: context,
      barrierDismissible: true,
      barrierLabel: '',
      barrierColor: Colors.black54,
      transitionDuration: const Duration(milliseconds: 300),
      pageBuilder: (context, animation1, animation2) {
        return Center(
          child: Container(
            height: 200,
            width: 300,
            padding: const EdgeInsets.all(16),
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(16),
            ),
            child: const Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Text('自定义弹窗', style: TextStyle(fontSize: 18)),
                SizedBox(height: 16),
                Text('你可以自定义动画、位置、模糊背景等。'),
              ],
            ),
          ),
        );
      },
      transitionBuilder: (context, anim1, anim2, child) {
        return FadeTransition(
          opacity: anim1,
          child: ScaleTransition(scale: anim1, child: child),
        );
      },
    );
  }





}
相关推荐
全栈派森4 小时前
初见 Dart：这门新语言如何让你的 App「动」起来？
android·flutter·ios
恋猫de小郭5 小时前
Dart 3.10 发布，快来看有什么更新吧
android·前端·flutter
恋猫de小郭6 小时前
Flutter 3.38 发布，快来看看有什么更新吧
android·前端·flutter
lichong95120 小时前
Android studio release 包打包配置 build.gradle
android·前端·ide·flutter·android studio·大前端·大前端++
旧时光_21 小时前
第3章：基础组件 —— 3.6 进度指示器
flutter
旧时光_1 天前
第3章：基础组件 —— 3.3 图片及ICON
flutter
GISer_Jing1 天前
跨端框架对决：React Native vs Flutter深度对比
flutter·react native·react.js
猪哥帅过吴彦祖1 天前
Flutter 从入门到精通：深入 Navigator 2.0 - GoRouter 路由完全指南
android·flutter·ios
恋猫de小郭1 天前
来了解一下，为什么你的 Flutter WebView 在 iOS 26 上有点击问题？
android·前端·flutter
你听得到112 天前
肝了半个月，我用 Flutter 写了个功能强大的图片编辑器，告别image_cropper
android·前端·flutter
热门推荐
01GitHub 镜像站点02UV安装并设置国内源03安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）04Linux下V2Ray安装配置指南05综合整理：pdf预览显示：你尝试预览的文件可能对你的计算机有害。如果你信任此文件以及其来源，请打开此文件以看其内容，如何解决以正常预览文件06Labelme从安装到标注：零基础完整指南07BongoCat - 跨平台键盘猫动画工具08智能库存管理的需求预测模型：从业务痛点到落地代码的完整实践09《大数据技术原理与应用》实验报告三 熟悉HBase常用操作10全面评测 | Photoshop 2026 新特性深度解析与实测体验