Flutter中无需操作动态更新Dialog内CircularPercentIndicator值

你当前代码里，showDialog内部调用的setState属于外部页面状态，无法触发Dialog内部组件刷新。要实现动态更新，得让Dialog拥有独立的状态管理，推荐两种方案：

方案1：使用StatefulBuilder #

用StatefulBuilder包裹CircularPercentIndicator，在内部触发局部刷新：

showDialog(
  context: context,
  builder: (context) {
    return StatefulBuilder(
      builder: (context, setState) {
        // 模拟数值动态更新，这里用Timer定时递增
        Timer.periodic(const Duration(milliseconds: 500), (timer) {
          setState(() {
            if (sum >= 100) {
              timer.cancel();
              return;
            }
            sum += 10;
          });
        });

        return Center(
          child: CircularPercentIndicator(
            radius: 45.0,
            lineWidth: 4.0,
            percent: sum / 100,
            center: Text("${sum.toInt()}"),
            animation: true,
            progressColor: Colors.orange,
          ),
        );
      },
    );
  },
);

注意：sum需为外部可访问变量，若无需和外部共享，也可直接在StatefulBuilder内部声明管理。

方案2：封装独立StatefulWidget #

将Dialog内容做成单独的StatefulWidget，状态管理更清晰：

class ProgressDialog extends StatefulWidget {
  final int initialSum;
  const ProgressDialog({Key? key, required this.initialSum}) : super(key: key);

  @override
  State<ProgressDialog> createState() => _ProgressDialogState();
}

class _ProgressDialogState extends State<ProgressDialog> {
  late int sum;

  @override
  void initState() {
    super.initState();
    sum = widget.initialSum;
    // 模拟数值更新逻辑
    Timer.periodic(const Duration(milliseconds: 500), (timer) {
      setState(() {
        if (sum >= 100) {
          timer.cancel();
          return;
        }
        sum += 10;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: CircularPercentIndicator(
        radius: 45.0,
        lineWidth: 4.0,
        percent: sum / 100,
        center: Text("${sum.toInt()}"),
        animation: true,
        progressColor: Colors.orange,
      ),
    );
  }
}

// 调用方式
showDialog(
  context: context,
  builder: (context) => ProgressDialog(initialSum: sum),
);

无需使用系统showDialog，推荐两种实现方式：

方案1：使用Stack组件 #

将原页面内容和覆盖层放在Stack中，覆盖层设半透明背景，既覆盖又能看到下方内容：

Stack(
  children: [
    // 原页面内容
    YourOriginalPageContent(),
    // 覆盖层，可通过Visibility控制显示隐藏
    Positioned.fill(
      child: Container(
        color: Colors.black.withOpacity(0.3),
        child: Center(
          child: CircularPercentIndicator(
            radius: 45.0,
            lineWidth: 4.0,
            percent: sum / 100,
            center: Text("${sum.toInt()}"),
            animation: true,
            progressColor: Colors.orange,
          ),
        ),
      ),
    ),
  ],
);

方案2：使用OverlayEntry #

通过Overlay插入全局覆盖层，不影响原页面状态：

void showOverlayProgress(BuildContext context) {
  OverlayEntry overlayEntry = OverlayEntry(
    builder: (context) => Stack(
      children: [
        Positioned.fill(
          child: Container(
            color: Colors.black.withOpacity(0.3),
            child: Center(
              child: CircularPercentIndicator(
                radius: 45.0,
                lineWidth: 4.0,
                percent: sum / 100,
                center: Text("${sum.toInt()}"),
                animation: true,
                progressColor: Colors.orange,
              ),
            ),
          ),
        ),
      ],
    ),
  );

  Overlay.of(context)!.insert(overlayEntry);

  // 模拟完成后移除覆盖层
  Future.delayed(const Duration(seconds: 5), () {
    overlayEntry.remove();
  });
}

// 调用方式
showOverlayProgress(context);

内容的提问来源于stack exchange，提问作者iKaka