Flutter中如何修改按钮的显示文本与功能逻辑？

要实现点击按钮切换「开始保存/终止保存」的功能，核心是通过状态管理控制按钮状态和保存操作的生命周期，具体实现如下：

关键改动点 #

• 将当前组件改为StatefulWidget，用来维护按钮文本和保存状态
• 新增两个状态变量：
  • _isSaving：标记当前是否处于保存状态
  • _saveOperation：用来控制保存操作的启动与终止
• 改造saveData函数，使其支持被中断

完整代码示例 #

class YourPage extends StatefulWidget {
  const YourPage({super.key});

  @override
  State<YourPage> createState() => _YourPageState();
}

class _YourPageState extends State<YourPage> {
  bool _isSaving = false;
  CancelableOperation? _saveOperation;

  // 改造后支持取消的saveData函数
  Future<void> saveData(CancelToken cancelToken) async {
    try {
      // 替换为你的实际保存逻辑，比如循环采集/上传数据
      while (true) {
        // 检查是否收到取消指令，收到则终止执行
        if (cancelToken.isCancelled) break;
        
        // 模拟保存耗时操作
        await Future.delayed(const Duration(seconds: 1));
        print("正在保存数据...");
      }
    } catch (e) {
      print("保存已终止: $e");
    }
  }

  void _handleButtonTap() {
    setState(() {
      if (!_isSaving) {
        // 启动保存流程
        _isSaving = true;
        _saveOperation = CancelableOperation.fromFuture(
          saveData(CancelToken()),
          onCancel: () => print("用户主动终止保存"),
        );
      } else {
        // 终止保存流程
        _isSaving = false;
        _saveOperation?.cancel();
        _saveOperation = null;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 页面其他内容...
      body: Align(
        alignment: Alignment.bottomCenter,
        child: TextButton(
          onPressed: _handleButtonTap,
          child: Text(_isSaving ? 'Stop' : 'Save Data'),
        ),
      ),
    );
  }

  @override
  void dispose() {
    // 页面销毁时确保取消未完成的保存操作，避免内存泄漏
    _saveOperation?.cancel();
    super.dispose();
  }
}

补充说明 #

1. 依赖准备：上述代码用到了async包的CancelableOperation和CancelToken，需要在pubspec.yaml中添加依赖：

dependencies:
  async: ^2.11.0

2. 同步耗时场景：如果你的saveData是同步的长耗时操作，需要将其放到Isolate中执行，避免阻塞UI线程，此时可以通过发送消息的方式终止Isolate的执行。
3. 自定义取消逻辑：如果不想引入第三方包，也可以自己维护一个bool _shouldCancel变量，在saveData的循环中检查该变量来终止执行。

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