Flutter---弹窗

常见的有六种

1.普通弹窗

效果图

实现代码

  //普通弹窗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.简单列表弹窗

效果图

实现代码

//简单列表弹窗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.底部弹窗

效果图

实现代码

//底部弹窗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弹窗

效果图

实现代码

//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.底部提示条

效果图

实现代码

//底部提示条void showSnackBar(BuildContext context) {ScaffoldMessenger.of(context).showSnackBar(const SnackBar(content: Text('保存成功'),duration: Duration(seconds: 2),),);}

5.自定义动画弹窗

效果图

实现代码

//自定义动画弹窗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),);},);}

代码实例

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';class HomePage extends StatefulWidget{const HomePage({super.key});@overrideState<StatefulWidget> createState() => _HomePageState();}class _HomePageState extends State<HomePage> {@overridevoid initState() {super.initState();}//UI构建@overrideWidget 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),);},);}}