Flutter中点击Switch切换开关时如何添加圆形加载器实现延迟激活

你可以通过新增加载状态变量控制UI展示，核心实现步骤如下： #

步骤1：新增状态变量 #

在当前页面的State类中新增变量，记录正在加载中的商品ID：

// 可根据你的book.id实际类型调整变量类型，比如int?
String? _loadingProductId;

步骤2：修改Switch相关代码 #

将原来ListTile的trailing属性替换为如下代码，加载时展示圆形加载器、禁用开关点击，等待结束后再更新开关状态：

trailing: _loadingProductId == book.id
    // 加载中显示圆形加载器
    ? const CircularProgressIndicator()
    : Switch(
        value: _selectedProducts.contains(book.id),
        // 全局有加载中的商品时，禁用所有开关的点击
        onChanged: _loadingProductId != null
            ? null
            : (bool? selected) async {
                if (selected == null) return;
                // 先更新状态，展示加载器
                setState(() {
                  _loadingProductId = book.id;
                });
                // 模拟等待2秒，可替换为你的实际接口请求逻辑
                await Future.delayed(const Duration(seconds: 2));
                // 等待结束后更新选中状态，清除加载状态
                setState(() {
                  _onProductSelected(selected, book.id);
                  _loadingProductId = null;
                });
              },
        activeTrackColor: HexColor("#b8c2cc"),
        activeColor: HexColor("#7367f0"),
      ),

注意事项 #

• 如果需要对接真实后端接口，把Future.delayed替换为你的接口请求代码即可，建议添加异常捕获逻辑，请求失败时也要把_loadingProductId置为null，避免页面一直显示加载状态。
• 点击Switch时事件会被Switch组件消费，不会触发外层InkWell的页面跳转逻辑，无需额外处理事件冲突。

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