如何禁用颤动中的按钮

Question

我有一个提升的按钮，我想在用户点击按钮后禁用它，这里调用 api。 我尝试过 setState 但似乎不起作用。我还能做什么来禁用按钮。

提示：我正在工作的概念是，一旦用户单击按钮，用户就不能再次单击相同的按钮。

这是我的代码：

bool isEnable = false;
     ElevatedButton.icon(
                  style: ButtonStyle(
                      backgroundColor: MaterialStateProperty.all(
                          const Color.fromARGB(255, 53, 121, 87)),
                      padding:
                          MaterialStateProperty.all(const EdgeInsets.all(20)),
                      textStyle: MaterialStateProperty.all(const TextStyle(
                          fontSize: 14, color: Colors.black))),
                  onPressed: qrdata.code != 9 && !isEnable 
                      ?  () async {   
                           setState(() {
                             isEnable = true;
                           });              
                          var url = Uri.parse(
                              '${ApiConstants.baseUrl}${ApiConstants.updateEndpoint}');
                          var responseData = await http.put(url,
                              headers: ApiConstants.headers);
              
                          if (responseData.statusCode == 202) {
                            print(jsonDecode(responseData.body).toString());
                            // ignore: use_build_context_synchronously
                            Navigator.push(
                              context,
                              MaterialPageRoute(
                                  builder: (context) => Dashboard(
                                        data: widget.data,
                                      )),
                            );
                         
                          }
                         //FocusManager.instance.primaryFocus!.unfocus();
                         //  });
                          // setState(() {
                          //  isEnable = false;
                          //   });
                      }
                      :null,
                
                 // : () {},
                  icon: const Icon(
                    Icons.home_filled,
                  ),
                  label: const Text('Entry',
                      style: TextStyle(
                        color: Colors.white,
                      )),
                ),

Answer 1

请确保变量

qrdata.code

和

isEnable

在构建方法之外初始化。每次调用 setState 时，一个或两个变量都会重置。

问题是每当按下 setState 时，它都不会重建按钮状态。因此，要更改按钮状态，请使用 StatefulBuilder 包裹按钮。

请在

try catch

中调用您的 API。

class DisableButton extends StatefulWidget {
  const DisableButton({Key? key}) : super(key: key);

  @override
  State<DisableButton> createState() => _DisableButtonState();
}

class _DisableButtonState extends State<DisableButton> {
  bool isEnable = false;
  int qrdata = 1;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: StatefulBuilder(
          builder:
              (BuildContext context, void Function(void Function()) setState) {
            return ElevatedButton.icon(
              style: ButtonStyle(
                  backgroundColor: MaterialStateProperty.all(
                      const Color.fromARGB(255, 53, 121, 87)),
                  padding: MaterialStateProperty.all(const EdgeInsets.all(20)),
                  textStyle: MaterialStateProperty.all(
                      const TextStyle(fontSize: 14, color: Colors.black))),
              onPressed: qrdata != 9 && !isEnable
                  ? () async {
                      setState(() {
                        isEnable = true;
                      });
                      print(">>>> Button is disabled");
                      try {
                        final data = await http.get(
                          Uri.parse(
                              'https://jsonplaceholder.typicode.com/albums/1'),
                        );

                        if (!mounted) return;

                        Navigator.push(
                          context,
                          MaterialPageRoute(
                            builder: (context) => NextPage(
                              data: data.body.toString(),
                            ),
                          ),
                        );

                        print("Api Data >>>> $data.body");
                      } catch (e) {
                        print("Error While fetching data");
                      }
                      setState(() {
                        isEnable = false;
                      });
                      print(">>>> Button is enabled");
                    }
                  : null,

              // : () {},
              icon: const Icon(
                Icons.home_filled,
              ),
              label: Text(isEnable ? "Disabled" : "Enabled",
                  style: const TextStyle(
                    color: Colors.white,
                  )),
            );
          },
        ),
      ),
    );
  }
}

class NextPage extends StatelessWidget {
  const NextPage({Key? key, required this.data}) : super(key: key);
  final String data;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(child: Text("Data : $data")),
    );
  }
}

代码中的问题是将

isEnable

设置为 true 但没有设置为 false。

ElevatedButton.icon(
                  style: ButtonStyle(
                      backgroundColor: MaterialStateProperty.all(
                          const Color.fromARGB(255, 53, 121, 87)),
                      padding:
                          MaterialStateProperty.all(const EdgeInsets.all(20)),
                      textStyle: MaterialStateProperty.all(const TextStyle(
                          fontSize: 14, color: Colors.black))),
                  onPressed: qrdata.code != 9 && !isEnable 
                      ?  () async {   
                           setState(() {
                             isEnable = true;
                           });              
                          var url = Uri.parse(
                              '${ApiConstants.baseUrl}${ApiConstants.updateEndpoint}');
                          var responseData = await http.put(url,
                              headers: ApiConstants.headers);
              
                          if (responseData.statusCode == 202) {
                            print(jsonDecode(responseData.body).toString());
                            // ignore: use_build_context_synchronously
                            Navigator.push(
                              context,
                              MaterialPageRoute(
                                  builder: (context) => Dashboard(
                                        data: widget.data,
                                      )),
                            );
                         
                          }
                         //FocusManager.instance.primaryFocus!.unfocus();
                         //  });
                          // setState(() {  <---- Uncomment this code.
                          //  isEnable = false;
                          //   });
                      }
                      :null,
                
                 // : () {},
                  icon: const Icon(
                    Icons.home_filled,
                  ),
                  label: const Text('Entry',
                      style: TextStyle(
                        color: Colors.white,
                      )),
                ),

Answer 2

应用以下代码： 您在 double equal 上遇到错误。

布尔变量：

bool isDisabled = false;

小工具

      ElevatedButton.icon(
                 style: ButtonStyle(
                    backgroundColor: MaterialStateProperty.all(
                        const Color.fromARGB(255, 53, 121, 87)),
                    padding:
                        MaterialStateProperty.all(const EdgeInsets.all(20)),
                    textStyle: MaterialStateProperty.all(const TextStyle(
                        fontSize: 14, color: Colors.black))),
                onPressed: qrdata.code != 9 && !isDisabled 
                    ?  () async {   
                         setState(() {
                           isDisabled = true;
                         });              
                        var url = Uri.parse(
                            '${ApiConstants.baseUrl}${ApiConstants.updateEndpoint}');
                        var responseData = await http.put(url,
                            headers: ApiConstants.headers);

                        if (responseData.statusCode == 202) {
                          print(jsonDecode(responseData.body).toString());
                          // ignore: use_build_context_synchronously
                          Navigator.push(
                            context,
                            MaterialPageRoute(
                                builder: (context) => Dashboard(
                                      data: widget.data,
                                    )),
                          );
                       
                        }
                        });
                         setState(() {
                         isDisabled = false;
                           });
                    }
                    :null,

Answer 3

根据文档：

如果

onPressed

回调为 null，则该按钮将被禁用，并且默认情况下将类似于disabledColor 中的平面按钮。

尝试下面的代码片段。

TextButton(
onPressed: calculateWhetherDisabledReturnsBool() ? null : () => 
whatToDoOnPressed,
child: Text('Button text')
);