Flutter Cupertino Buttino SheetAction on按下可触发加载指示器，然后勾选并延迟

Summary:
The StatefulBuilder widgets may not be required, as the BuildContext may come from your custom widget. The ElevatedButton serves as an example of launching the CupertinoActionSheet, which can be substituted with whatever method you are using. Note that I didn't make use of custom widgets such as KNText. The two parts to your question to my understanding are how to 显示加载, and how to show a checkmark after selection and loading. Note I set the delay for loading to 1000ms, so you can see the loading longer in the example.

Loading Summary
The loading CircularProgressIndicator is shown by roughly following the below steps. ref _showLoading function in the code below.

1. 呼叫showDialog
2. 有showDialog返回CircularProgressIndicator
3. 运行Future.delayed(在生产中是网络呼叫？)
4. 呼叫Navigator.pop关闭加载对话框

Checkmark Summary:
复选标记可以以多种方式显示，在这种情况下，我使用Visibility来根据下面代码中名为selected的Map中的值隐藏和显示复选标记.当按下模式中的按钮时(加载完成后)，selected中的值会更新.大致过程如下

1. 按下启用或禁用按钮
2. 显示加载
3. 加载完成
4. 根据按下的按钮更新selected的值
5. rebuild, because setState was called. When building the checkmarks are shown based on the values in selected.
   
   Button:
   
   
   Modal:
   
   
   Loading:
   
   
   Check changed after loading
   

Code:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() {
  // used to indicate which option is selected
  Map<String, bool> selected = {
    "enabled": true,
    "disabled": false,
  };

  // shows the loading indicator
  Future<void> _showLoading({
    required BuildContext context,
  }) async {
    // show dialog overlay with just a progress indicator
    showDialog(
      barrierDismissible: false,
      context: context,
      builder: (context) => const Center(
        child: CircularProgressIndicator(
          color: Colors.red,
        ),
      ),
    );

    // run delay - assume swapping for some kind of network call
    // on delay done pop loading dialog
    await Future.delayed(
      const Duration(
        milliseconds: 1000,
      ),
      () {
        Navigator.pop(
          context,
        );
      },
    );
  }

  runApp(
    MaterialApp(
      home: Scaffold(
        body: StatefulBuilder(
          builder: (context, setState) => Center(
            // button to trigger modal
            child: ElevatedButton(
              child: const Text(
                "Click to test",
              ),
              onPressed: () => showCupertinoModalPopup(
                context: context,
                builder: (BuildContext modalContext) {
                  /*
                    Rough example begins
                  */
                  return StatefulBuilder(
                    builder: (context, setState) => CupertinoActionSheet(
                      title: const Text(
                        "Video sound settings",
                      ),
                      message: const Text(
                        "Please choose from an option below :",
                      ),
                      actions: [
                        CupertinoActionSheetAction(
                          onPressed: ({
                            int index = 0,
                          }) async {
                            // 显示加载, and wait till function done
                            await _showLoading(
                              context: context,
                            );

                            // tell flutter to build, check will be shown based on values set on next build
                            setState(
                              () {
                                selected["enabled"] = true;
                                selected["disabled"] = false;
                              },
                            );
                          },
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              const Text(
                                "Enabled",
                              ),
                              Visibility(
                                visible: selected["enabled"]!,
                                child: const Icon(
                                  Icons.check,
                                ),
                              ),
                            ],
                          ),
                        ),
                        CupertinoActionSheetAction(
                          onPressed: ({
                            int index = 0,
                          }) async {
                            await _showLoading(
                              context: context,
                            );

                            // opposite values
                            setState(
                              () {
                                selected["enabled"] = false;
                                selected["disabled"] = true;
                              },
                            );
                          },
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              const Text(
                                "Disabled",
                              ),
                              Visibility(
                                visible: selected["disabled"]!,
                                child: const Icon(
                                  Icons.check,
                                ),
                              ),
                            ],
                          ),
                        ),
                      ],
                      cancelButton: CupertinoActionSheetAction(
                        isDefaultAction: true,
                        onPressed: () {
                          Navigator.pop(
                            context,
                          );
                        },
                        child: const Text(
                          "Cancel",
                        ),
                      ),
                    ),
                  );
                },
              ),
            ),
          ),
        ),
      ),
    ),
  );
}

100

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() {
  // used to indicate which option is selected
  Map<String, bool> selected = {
    "enabled": true,
    "disabled": false,
  };

  // if true 显示加载
  bool loadingFlag = false;

  runApp(
    MaterialApp(
      home: Scaffold(
        body: StatefulBuilder(
          builder: (context, setState) => Center(
            // button to trigger modal
            child: ElevatedButton(
              child: const Text(
                "Click to test",
              ),
              onPressed: () => showCupertinoModalPopup(
                context: context,
                builder: (BuildContext modalContext) {
                  /*
                    Rough example begins
                  */
                  return StatefulBuilder(
                    builder: (context, setState) => CupertinoActionSheet(
                      title: const Text(
                        "Video sound settings",
                      ),
                      message: const Text(
                        "Please choose from an option below :",
                      ),
                      actions: [
                        CupertinoActionSheetAction(
                          onPressed: ({
                            int index = 0,
                          }) async {

                            // update flags and set loading flag, then build
                            setState(
                              () {
                                selected["enabled"] = true;
                                selected["disabled"] = false;
                                loadingFlag = true;
                              },
                            );

                            // wait for delay, change loading flag, then build
                            await Future.delayed(
                              const Duration(
                                milliseconds: 1000,
                              ),
                              () {
                                setState(
                                  () {
                                    loadingFlag = false;
                                  },
                                );
                              },
                            );
                          },
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              const Text(
                                "Enabled",
                              ),
                              Visibility(
                                visible: selected["enabled"]!,
                                // check loading flag to determine if should 显示加载 or check
                                child: loadingFlag
                                    ? const CircularProgressIndicator()
                                    : const Icon(
                                        Icons.check,
                                      ),
                              ),
                            ],
                          ),
                        ),
                        CupertinoActionSheetAction(
                          onPressed: ({
                            int index = 0,
                          }) async {
                            // opposite enable disable
                            setState(
                              () {
                                selected["enabled"] = false;
                                selected["disabled"] = true;
                                loadingFlag = true;
                              },
                            );

                            await Future.delayed(
                              const Duration(
                                milliseconds: 1000,
                              ),
                              () {
                                setState(
                                  () {
                                    loadingFlag = false;
                                  },
                                );
                              },
                            );
                          },
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              const Text(
                                "Disabled",
                              ),
                              Visibility(
                                visible: selected["disabled"]!,
                                child: loadingFlag
                                    ? const CircularProgressIndicator()
                                    : const Icon(
                                        Icons.check,
                                      ),
                              ),
                            ],
                          ),
                        ),
                      ],
                      cancelButton: CupertinoActionSheetAction(
                        isDefaultAction: true,
                        onPressed: () {
                          Navigator.pop(
                            context,
                          );
                        },
                        child: const Text(
                          "Cancel",
                        ),
                      ),
                    ),
                  );
                },
              ),
            ),
          ),
        ),
      ),
    ),
  );
}