Flutter如何实现提交按钮首次点击后锁定 避免重复发送POST表单请求

实现逻辑 #

通过状态变量标记提交进程，提交过程中直接禁用按钮，同时优化交互提示避免用户误操作，具体改造步骤如下：

• 在当前页面的State类中新增提交状态标记

bool _isSubmitting = false;

• 改造makeRequest异步方法，新增状态校验和更新逻辑

Future<void> makeRequest() async {
  // 已处于提交状态则直接拦截重复请求
  if (_isSubmitting) return;
  setState(() {
    _isSubmitting = true;
  });
  try {
    HttpClient client = HttpClient();
    client.badCertificateCallback =
        ((X509Certificate cert, String host, int port) => true);

    String url = global.urlVar + "/forms";

    Map map = {
      "seals": _mySeals,
      "data_area": global.dataArea,
      "object": global.nameObj,
      "type": global.typesOp,
      "user": global.nameUser,
    };

    HttpClientRequest request = await client.postUrl(Uri.parse(url));
    request.headers.set('content-type', 'application/json');
    request.add(utf8.encode(json.encode(map)));
    HttpClientResponse response = await request.close();

    if (200 == response.statusCode) {
      Navigator.push(context, MaterialPageRoute(builder: (context) => Status()));
    } else {
      Navigator.push(context, MaterialPageRoute(builder: (context) => Error_Auth()));
    }
  } finally {
    // 无论请求结果如何，页面未销毁则重置提交状态
    if (mounted) {
      setState(() {
        _isSubmitting = false;
      });
    }
  }
}

• 改造按钮组件，根据状态动态调整交互和显示效果

Container(
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(15),
  ),
  padding: EdgeInsets.all(10.0),
  child: ButtonTheme(
    minWidth: 10.0,
    height: 40.0,
    child: RaisedButton.icon(
      label: Text(
        _isSubmitting ? "提交中..." : "Submit Form",
        style: TextStyle(color: Colors.white, fontSize: 15.0),
      ),
      icon: _isSubmitting 
          ? SizedBox(
              width: 16,
              height: 16,
              child: CircularProgressIndicator(
                strokeWidth: 2,
                valueColor: AlwaysStoppedAnimation<Color>(Colors.white),
              ),
            )
          : Icon(Icons.send_to_mobile),
      // 提交中时onPressed设为null，按钮自动进入禁用状态
      onPressed: _isSubmitting ? null : makeRequest,
      color: Colors.blue,
      padding: EdgeInsets.all(20.0),
    ),
  ),
  margin: EdgeInsets.only(top: 0.0),
),

补充说明 #

• onPressed赋值为null时，RaisedButton默认会进入不可点击的禁用状态，无需额外配置点击拦截
• 提交过程中替换为加载动画和提示文案，可以明确告知用户当前操作正在执行，避免用户以为点击失效重复触发
• mounted判断用于避免请求返回时页面已被销毁，调用setState触发的框架异常

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