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),
        );
      },
    );
  }





}
相关推荐
勇气要爆发26 分钟前
【第五阶段—高级特性和框架】复杂动画案例分析初体验
flutter
勤劳打代码2 小时前
追本溯源 —— SetState 刷新做了什么
flutter·面试·性能优化
松☆3 小时前
OpenHarmony 后台任务与 Flutter 生命周期协调：构建稳定可靠的混合应用
flutter
松☆4 小时前
Flutter 与 OpenHarmony 深度集成：自定义 MethodChannel 插件开发全指南
flutter·wpf
克喵的水银蛇4 小时前
Flutter 布局实战：掌握 Row/Column/Flex 弹性布局
前端·javascript·flutter
sunly_4 小时前
Flutter：实现多图上传选择的UI
flutter·ui
倔强_build5 小时前
flutter app 状态栏
flutter
晚霞的不甘5 小时前
深度解析：Flutter 与 OpenHarmony 融合架构下的跨平台渲染机制与系统级集成
flutter·架构
kirk_wang5 小时前
Flutter图片库CachedNetworkImage鸿蒙适配：从原理到实践
flutter·移动开发·跨平台·arkts·鸿蒙
松☆5 小时前
Flutter 与 OpenHarmony 数据持久化协同方案：从 Shared Preferences 到分布式数据管理
分布式·flutter
热门推荐
01GitHub 镜像站点02UV安装并设置国内源03BongoCat - 跨平台键盘猫动画工具04安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）05本地部署阿里最新开源的Z-Image06【超详细教程】手把手教你从微软官网免费下载Windows 10官方原版ISO镜像（2025最新版）07Linux下V2Ray安装配置指南08Meta第三代“分割一切”模型——SAM 3本地部署教程：首支持文本提示分割，400万概念、30毫秒响应，检测分割追踪一网打尽09Labelme从安装到标注：零基础完整指南10【保姆级教程】免费使用Gemini3的5种方法！免翻墙/国内直连