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();
          },
        );
      },
    );
  }
}
相关推荐
m0_748247801 小时前
Flutter Intl包使用指南：实现国际化和本地化
前端·javascript·flutter
迷雾漫步者2 小时前
Flutter组件————PageView
flutter·跨平台·dart
迷雾漫步者9 小时前
Flutter组件————FloatingActionButton
前端·flutter·dart
coder_pig14 小时前
📝小记：Ubuntu 部署 Jenkins 打包 Flutter APK
flutter·ubuntu·jenkins
捡芝麻丢西瓜16 小时前
flutter自学笔记5- dart 编码规范
flutter·dart
恋猫de小郭16 小时前
什么？Flutter 可能会被 SwiftUI/ArkUI 化？全新的 Flutter Roadmap
flutter·ios·swiftui
sunly_2 天前
Flutter：导航，tab切换，顶部固定，列表分页滚动
开发语言·javascript·flutter
敲代码的小强2 天前
Flutter项目兼容鸿蒙Next系统
flutter·华为·harmonyos
Zh-jie2 天前
flutter 快速实现侧边栏
前端·javascript·flutter
truemi.733 天前
flutter --no-color pub get 超时解决方法
android·flutter
热门推荐
01〔AI 绘画〕Stable Diffusion 之 解决绘制多人或面部很小的人物时面部崩坏问题 篇02ARM学习（31）编译器对overlay方式的支持03玄机平台应急响应—webshell查杀04DisplayPort AltMode On Type-c协议_Ver2.0(学习笔记)05校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站06Docker 夺命连环 15 问076个主流的工业3D管道设计软件08基于大语言模型（LLM）的合成数据生成、策展和评估的综述09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明10红米手机使用google play