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

小部件组件

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

dart 复制代码

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.delayed
    Future.delayed(Duration(seconds: 2)).then((_) {
      _incrementCounter();

      ///(context as Element).markNeedsBuild();
      //ixx++;

      //setState(() {});
      // 加载完成后关闭弹窗
      // Navigator.pop(context);
    });

    // 模拟加载过程，这里使用Future.delayed
    Future.delayed(Duration(seconds: 4)).then((_) {
      _incrementCounter();
    });

    // 模拟加载过程，这里使用Future.delayed
    Future.delayed(Duration(seconds: 6)).then((_) {
      _incrementCounter();
    });
    Future.delayed(Duration(seconds: 8)).then((_) {
      _incrementCounter();
    });
    Future.delayed(Duration(seconds: 11)).then((_) {
      _incrementCounter();
      Navigator.pop(context);
    });
  }

  @override
  void initState() {
    super.initState();

    ///模拟定时器
    _incrementCounter2();
  }

  @override
  Widget 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,
              ),
            ),
          ],
        )
      ],
    );
  }

  @override
  void dispose() {
    stateToWidgetMap.clear();
    strlist.clear();
    listcolor.clear();
    ///回收界面
    super.dispose();
  }
}

使用 ----以弹窗形式

dart 复制代码

  void _showDialog2() {
    showDialog(
      context: context,
      //点击背景不消失
      barrierDismissible: false,
      builder: (BuildContext context) {
        // 使用StatefulBuilder来局部管理Dialog中的状态
        return const ExecutionDialog();
      },
    );
  }

///点击触发弹窗
ElevatedButton(
              onPressed: _showDialog2,
              child: Text('Show Dialog'),
            ),