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





}
相关推荐
武玄天宗6 小时前
第四章、用flutter创建登录界面
flutter
搬砖的kk6 小时前
基于Flutter开发应用如何快速适配HarmonyOS
flutter·华为·harmonyos
昼-枕7 小时前
Flutter深度解析：如何构建高性能、跨平台的移动应用
flutter
音浪豆豆_Rachel8 小时前
Flutter 与原生通信的桥梁：深入解析 Pigeon 与后台线程通信
flutter·harmonyos
音浪豆豆_Rachel9 小时前
Flutter跨平台通信的智能配置：Pigeon注解配置与鸿蒙生态深度集成
flutter·华为·harmonyos
Bryce李小白9 小时前
深入理解WidgetsFlutterBinding
flutter
开心_开心急了10 小时前
Ai加Flutter实现自定义标题栏(appBar)
前端·flutter
全栈派森10 小时前
Flutter 实战：基于 GetX + Obx 的企业级架构设计指南
前端·flutter
yuezhilangniao15 小时前
Windows版Flutter环境部署速查指南- win10开发环境flutter
windows·flutter
热门推荐
01GitHub 镜像站点02从快手“12·22”直播攻击事件看：一次教科书式的业务层饱和攻击03UV安装并设置国内源04Linux下V2Ray安装配置指南05Gemini3 生成的基于手势控制3D粒子圣诞树06在VSCode配置Java开发环境的保姆级教程（适配各类AI编程IDE）07解决 WSL Ubuntu 中 /etc/resolv.conf 自动重置问题08Labelme从安装到标注：零基础完整指南09GLM-4.7 vs MiniMax-M2.1：代码工程理解10CentOS的ISO镜像下载