Flutter---弹窗 - 技术栈

常见的有六种

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





}