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();
          },
        );
      },
    );
  }
}
相关推荐
江上清风山间明月1 天前
Flutter开发的应用页面非常多时如何高效管理路由
android·flutter·路由·页面管理·routes·ongenerateroute
Zsnoin能2 天前
flutter国际化、主题配置、视频播放器UI、扫码功能、水波纹问题
flutter
早起的年轻人2 天前
Flutter CupertinoNavigationBar iOS 风格导航栏的组件
flutter·ios
HappyAcmen2 天前
关于Flutter前端面试题及其答案解析
前端·flutter
coooliang2 天前
Flutter 中的单例模式
javascript·flutter·单例模式
coooliang2 天前
Flutter项目中设置安卓启动页
android·flutter
JIngles1232 天前
flutter将utf-8编码的字节序列转换为中英文字符串
java·javascript·flutter
B.-2 天前
在 Flutter 中实现文件读写
开发语言·学习·flutter·android studio·xcode
freflying11192 天前
使用jenkins构建Android+Flutter项目依赖自动升级带来兼容性问题及Jenkins构建速度慢问题解决
android·flutter·jenkins
机器瓦力3 天前
Flutter应用开发：对象存储管理图片
flutter
热门推荐
01DeepSeek各版本说明与优缺点分析02如何在WPS和Word/Excel中直接使用DeepSeek功能03DeepSeek本地部署详细指南04太炸裂了！清华大学deepseek从入门到精通使用手册又出第三版了，《普通人如何抓住DeepSeek红利》（无套路，直接下载）05本地部署DeepSeek教程（Mac版本）06DeepSeek r1本地安装全指南07DeepSeek RAGFlow构建本地知识库系统08本地化部署AI知识库：基于Ollama+DeepSeek+AnythingLLM保姆级教程09DeepSeek R1本地化部署 Ollama + Chatbox 打造最强 AI 工具10【docker】Windows10安装Docker Desktop - WSL update failed