当前位置：首页 > news >正文

flutter 自定义弹窗封装弹窗----在弹窗内实现部分窗体生命周期

news 2025/8/16 14:44:24

小部件组件
可以在里面加装其他事件如HTTP接口访问

import 'package:flutter/material.dart';///执行弹窗动画封装
class ExecutionDialog extends StatefulWidget {// final String? title;// final String? message;// final Function? onExecute;//// const ExecutionDialog({super.key, this.title, this.message, this.onExecute});const ExecutionDialog({super.key,});@override_ExecutionDialogState createState() => _ExecutionDialogState();
}//封装执行动画 完整的自我生命周期
class _ExecutionDialogState extends State<ExecutionDialog> {///固定预制参数Map<int, Widget> stateToWidgetMap = {0: Container(width: 65.0, // 设置容器的宽度height: 65.0, // 设置容器的高度child: const CircularProgressIndicator(strokeWidth: 5.0, // 设置进度圈的线宽valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),),),1: const Image(image: AssetImage('assets/ic_timeout.png'),width: 65,),2: const Image(image: AssetImage('assets/ic_sucess.png'),width: 65,),3: const Image(image: AssetImage('assets/ic_failed.png'),width: 65,),// 添加更多状态和对应的Widget};var strlist = ["执行中..", "执行超时", "指令成功", "执行错误"];List<Color> listcolor=[Colors.blue,Colors.yellow[700]!,Colors.blue,Colors.red[700]!];///bool _isExecuting = false;int ixx = 0;void _incrementCounter() {// setState(() {//// });ixx++;if (ixx == strlist.length) {ixx = 0;}// else if (ixx == 2) {//   Future.delayed(Duration(milliseconds: 500)).then((_) {//     _incrementCounter();//     Navigator.pop(context);//   });// }setState(() {});}void _incrementCounter2() {// 模拟加载过程，这里使用Future.delayedFuture.delayed(Duration(seconds: 2)).then((_) {_incrementCounter();///(context as Element).markNeedsBuild();//ixx++;//setState(() {});// 加载完成后关闭弹窗// Navigator.pop(context);});// 模拟加载过程，这里使用Future.delayedFuture.delayed(Duration(seconds: 4)).then((_) {_incrementCounter();});// 模拟加载过程，这里使用Future.delayedFuture.delayed(Duration(seconds: 6)).then((_) {_incrementCounter();});Future.delayed(Duration(seconds: 8)).then((_) {_incrementCounter();});Future.delayed(Duration(seconds: 11)).then((_) {_incrementCounter();Navigator.pop(context);});}@overridevoid initState() {super.initState();///模拟定时器_incrementCounter2();}@overrideWidget build(BuildContext context) {return AlertDialog(content: SizedBox(height: 160,child: Column(crossAxisAlignment: CrossAxisAlignment.center, // 水平居中mainAxisAlignment: MainAxisAlignment.center, // 垂直居中children: [/* const Text('提示',style: TextStyle(fontSize: 16,color: Colors.black,),),///分割线条Container(height: 2, // 线条的高度color: Colors.black, // 线条的颜色width: double.infinity, // 线条的宽度，尽可能宽margin:EdgeInsets.symmetric(horizontal: 40, vertical: 20), // 左右边距),*/stateToWidgetMap[ixx] ?? const Text('未知状态'),// CircularProgressIndicator(),],),),actions: <Widget>[Row(mainAxisAlignment: MainAxisAlignment.center,children: [Text(strlist[ixx],style: TextStyle(fontSize: 16,color: listcolor[ixx] ?? Colors.black,//fontWeight: FontWeight.bold,),),],)],);}@overridevoid dispose() {stateToWidgetMap.clear();strlist.clear();listcolor.clear();///回收界面super.dispose();}
}

使用 ----以弹窗形式

  void _showDialog2() {showDialog(context: context,//点击背景不消失barrierDismissible: false,builder: (BuildContext context) {// 使用StatefulBuilder来局部管理Dialog中的状态return const ExecutionDialog();},);}///点击触发弹窗
ElevatedButton(onPressed: _showDialog2,child: Text('Show Dialog'),),