Flutter中点击ElevatedButton断开VPN时如何恢复按钮蓝色？

你的问题出在用独立的isPressed变量控制按钮颜色，但这个变量没有和VPN的真实状态同步：只有点击Connect（disconnected状态）时才切换isPressed，断开VPN或状态变化时完全没更新它，导致颜色和真实的VPN状态脱节。

正确的做法是直接用state（VPN的真实状态）来控制按钮颜色，不需要额外维护isPressed变量，这样颜色会和VPN状态自动保持一致。

修改后的代码 #

// 删掉原来的bool isPressed = true;

ElevatedButton(
   onPressed: () async {
      if (state == FlutterVpnState.disconnected) {
         await FlutterVpn.connectIkev2EAP(
            server: _addressController.text,
            username: _usernameController.text,
            password: _passwordController.text,
         );
      } else if (state == FlutterVpnState.connected || state == FlutterVpnState.error) {
         await FlutterVpn.disconnect();
      }
   },
   child: Text(
      state == FlutterVpnState.disconnected ? 'Connect' : 'Disconnect',
   ),
   style: ElevatedButton.styleFrom(
      primary: state == FlutterVpnState.disconnected ? Colors.blue : Colors.redAccent
   ),
),

额外注意事项 #

确保你已经在监听FlutterVpn的状态变化，这样状态更新时会自动触发UI刷新：

@override
void initState() {
  super.initState();
  // 监听VPN状态变化，更新state并触发setState
  FlutterVpn.onStateChanged.listen((newState) {
    setState(() {
      state = newState;
    });
  });
}

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