Flutter弹窗的简单使用

举儿2023-12-20 8:40

AlertDialog确认取消弹窗

Dart 复制代码 
//AlertDialog确认取消弹窗
void _alertDialog() {
  showDialog(
    context: context,
    barrierDismissible: false, //点击弹窗以外背景是否取消弹窗
    builder: (context) {
      return AlertDialog(
        title: const Text("温馨提示！"),
        content: const Text("您确定要删除吗？"),
        actions: [
          TextButton(
            onPressed: () {
              //关闭弹窗
              Navigator.of(context).pop();
            },
            child: const Text("取消"),
          ),
          TextButton(
            onPressed: () {
              //关闭弹窗
              Navigator.of(context).pop();
            },
            child: const Text("确定"),
          ),
        ],
      );
    },
  );
}

按钮上添加弹窗使用

Dart 复制代码 
ElevatedButton(
  onPressed: _alertDialog,
  child: const Text("AlertDialog确认取消弹窗"),
),

SimpleDialog选择项弹窗

Dart 复制代码 
//SimpleDialog选择项弹窗
void _simpleDialog() {
  showDialog(
    context: context,
    barrierDismissible: true, //点击弹窗以外背景是否取消弹窗
    builder: (context) {
      return SimpleDialog(
        title: const Text("请选择开发语言"),
        children: [
          SimpleDialogOption(
            child: const Text("Flutter"),
            onPressed: () {
              //关闭弹窗
              Navigator.of(context).pop();
            },
          ),
          const Divider(),
          SimpleDialogOption(
            child: const Text("Kotlin"),
            onPressed: () {
              //关闭弹窗
              Navigator.of(context).pop();
            },
          ),
          const Divider(),
          SimpleDialogOption(
            child: const Text("Java"),
            onPressed: () {
              //关闭弹窗
              Navigator.of(context).pop();
            },
          ),
        ],
      );
    },
  );
}

ActionSheet底部弹窗

Dart 复制代码 
//ActionSheet底部弹窗
void _modelBottomSheet() {
  showModalBottomSheet(
    context: context,
    builder: (context) {
      return SizedBox(
        child: Column(
          children: [
            ListTile(
              title: const Text("分享"),
              onTap: () {
                //关闭弹窗
                Navigator.of(context).pop();
              },
            ),
            const Divider(height: 1),
            ListTile(
              title: const Text("收藏"),
              onTap: () {
                //关闭弹窗
                Navigator.of(context).pop();
              },
            ),
            const Divider(height: 1),
            ListTile(
              title: const Text("转发"),
              onTap: () {
                //关闭弹窗
                Navigator.of(context).pop();
              },
            ),
            const Divider(height: 1),
            ListTile(
              title: const Text("关注"),
              onTap: () {
                //关闭弹窗
                Navigator.of(context).pop();
              },
            ),
            const Divider(height: 1),
            ListTile(
              title: const Text("取消"),
              onTap: () {
                //关闭弹窗
                Navigator.of(context).pop();
              },
            ),
            const Divider(height: 1),
          ],
        ),
      );
    },
  );
}

自定义Dialog弹窗

Dart 复制代码 
//自定义Dialog弹窗
void _myDialog() {
  showDialog(
    context: context,
    barrierDismissible: false, //点击弹窗以外背景是否取消弹窗
    builder: (context) {
      return MyDialog(
        title: "温馨提示",
        content: "我是自定义弹窗",
        onTap: () {
          //关闭弹窗
          Navigator.of(context).pop();
        },
      );
    },
  );
}

自定义MyDialog

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

class MyDialog extends Dialog {
  final String title;
  final String content;
  final Function()? onTap;

  const MyDialog({
    Key? key,
    required this.title,
    required this.content,
    required this.onTap,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Material(
      type: MaterialType.transparency, //设置背景透明
      child: Center(
        child: Container(
          width: double.infinity,
          height: 240,
          //装饰设置
          decoration: const BoxDecoration(
            //设置背景颜色
            color: Colors.white,
            //设置Container圆角
            borderRadius: BorderRadius.all(Radius.circular(8.0)),
          ),
          margin: const EdgeInsets.all(20),
          child: Column(
            children: [
              Padding(
                padding: const EdgeInsets.all(10),
                child: Stack(
                  alignment: Alignment.center,
                  children: [
                    Align(
                      alignment: Alignment.centerLeft,
                      child: Text(
                        title,
                        style: const TextStyle(fontSize: 18),
                      ),
                    ),
                    Align(
                      alignment: Alignment.centerRight,
                      child: InkWell(
                        onTap: onTap,
                        child: const Icon(Icons.close),
                      ),
                    ),
                  ],
                ),
              ),
              const Divider(height: 1),
              Container(
                padding: const EdgeInsets.all(10),
                width: double.infinity,
                child: Text(
                  content,
                  style: const TextStyle(fontSize: 14),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

主页完整代码

Dart 复制代码 
import 'package:flutter/material.dart';
import 'package:flutter_demo/widget/myDialog.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      //隐藏DEBUG图标
      debugShowCheckedModeBanner: false,
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const Scaffold(
        body: DialogPage(),
      ),
    );
  }
}

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

  @override
  State<DialogPage> createState() => _DialogPageState();
}

class _DialogPageState extends State<DialogPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Flutter"),
      ),
      body: Container(
        padding: const EdgeInsets.all(10),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            ElevatedButton(
              onPressed: _alertDialog,
              child: const Text("AlertDialog确认取消弹窗"),
            ),
            const SizedBox(height: 10),
            ElevatedButton(
              onPressed: _simpleDialog,
              child: const Text("SimpleDialog选择项弹窗"),
            ),
            const SizedBox(height: 10),
            ElevatedButton(
              onPressed: _modelBottomSheet,
              child: const Text("ActionSheet底部弹窗"),
            ),
            const SizedBox(height: 10),
            ElevatedButton(
              onPressed: _myDialog,
              child: const Text("自定义Dialog弹窗"),
            ),
          ],
        ),
      ),
    );
  }

  //AlertDialog确认取消弹窗
  void _alertDialog() {
    showDialog(
      context: context,
      barrierDismissible: false, //点击弹窗以外背景是否取消弹窗
      builder: (context) {
        return AlertDialog(
          title: const Text("温馨提示！"),
          content: const Text("您确定要删除吗？"),
          actions: [
            TextButton(
              onPressed: () {
                //关闭弹窗
                Navigator.of(context).pop();
              },
              child: const Text("取消"),
            ),
            TextButton(
              onPressed: () {
                //关闭弹窗
                Navigator.of(context).pop();
              },
              child: const Text("确定"),
            ),
          ],
        );
      },
    );
  }

  //SimpleDialog选择项弹窗
  void _simpleDialog() {
    showDialog(
      context: context,
      barrierDismissible: true, //点击弹窗以外背景是否取消弹窗
      builder: (context) {
        return SimpleDialog(
          title: const Text("请选择开发语言"),
          children: [
            SimpleDialogOption(
              child: const Text("Flutter"),
              onPressed: () {
                //关闭弹窗
                Navigator.of(context).pop();
              },
            ),
            const Divider(),
            SimpleDialogOption(
              child: const Text("Kotlin"),
              onPressed: () {
                //关闭弹窗
                Navigator.of(context).pop();
              },
            ),
            const Divider(),
            SimpleDialogOption(
              child: const Text("Java"),
              onPressed: () {
                //关闭弹窗
                Navigator.of(context).pop();
              },
            ),
          ],
        );
      },
    );
  }

  //ActionSheet底部弹窗
  void _modelBottomSheet() {
    showModalBottomSheet(
      context: context,
      builder: (context) {
        return SizedBox(
          child: Column(
            children: [
              ListTile(
                title: const Text("分享"),
                onTap: () {
                  //关闭弹窗
                  Navigator.of(context).pop();
                },
              ),
              const Divider(height: 1),
              ListTile(
                title: const Text("收藏"),
                onTap: () {
                  //关闭弹窗
                  Navigator.of(context).pop();
                },
              ),
              const Divider(height: 1),
              ListTile(
                title: const Text("转发"),
                onTap: () {
                  //关闭弹窗
                  Navigator.of(context).pop();
                },
              ),
              const Divider(height: 1),
              ListTile(
                title: const Text("关注"),
                onTap: () {
                  //关闭弹窗
                  Navigator.of(context).pop();
                },
              ),
              const Divider(height: 1),
              ListTile(
                title: const Text("取消"),
                onTap: () {
                  //关闭弹窗
                  Navigator.of(context).pop();
                },
              ),
              const Divider(height: 1),
            ],
          ),
        );
      },
    );
  }

  //自定义Dialog弹窗
  void _myDialog() {
    showDialog(
      context: context,
      barrierDismissible: false, //点击弹窗以外背景是否取消弹窗
      builder: (context) {
        return MyDialog(
          title: "温馨提示",
          content: "我是自定义弹窗",
          onTap: () {
            //关闭弹窗
            Navigator.of(context).pop();
          },
        );
      },
    );
  }
}
相关推荐
恋猫de小郭9 分钟前
AI 时代，一个优化 Flutter 的重复代码工具 Deslop
android·前端·flutter
ljt27249606611 天前
Flutter笔记--envied
前端·笔记·flutter
加农炮手Jinx1 天前
Flutter for OpenHarmony 实战：flutter_animate 声明式动画让 UI 灵动如原生
flutter·ui·华为·harmonyos·鸿蒙
里欧跑得慢1 天前
Flutter 像素级还原：设计稿到代码的视觉无损转换技巧
前端·css·flutter·web
里欧跑得慢1 天前
Flutter 三方库 function_tree — 鸿蒙应用开发中的动态数学公式解析与计算神器，实现鸿蒙深度适配下的复杂函数逻辑运行时求值实战（适配鸿蒙 HarmonyOS Next ohos）
android·前端·安全·flutter·华为·harmonyos
zzzzzzzz'2 天前
浅谈自动化测试2——selenium库中的常用函数
selenium·测试工具·文件上传·导航栏·弹窗·定位元素·查找元素
吃西瓜的年年2 天前
vue3原理思维导图
vue.js·笔记·flutter
GitLqr3 天前
从代码复用走向生态：Flutter Dart Package 实战全指南
flutter·全栈·dart
SoaringHeart3 天前
Flutter 进阶：NCanvasImageLoader 让 Canvas 也能画网络图
前端·flutter
热门推荐
01国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）02GitHub 镜像站点03ZCode 周末送额度活动开启：3 亿 Token 免费领取042026 国产 AI 大模型横评：DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打？05历年考研数学一、数学二、数学三真题试卷及答案PDF06微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新07AI 编程 IDE 全景解析 2026：Agent 全面接管开发链路08蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接09Agnes AI 免费 API 接入指南：文本、生图、生视频，一套接口全免费10VSCode+CodeX扩展，无法启动