点击按钮时如何显示Flutter Spinkit？登录场景实现问题

你的问题核心是：直接在onPressed的异步函数里创建SpinKitWave组件不会被渲染——Flutter只会渲染Widget树内的组件，你这里只是创建了组件实例，没有将它嵌入到界面的Widget结构中。

解决步骤： #

1. 添加状态变量控制加载状态
   在按钮所在的StatefulWidget的State类中，新增一个布尔变量来标记是否处于加载状态：

   bool _isLoading = false;
   

2. 修改onPressed的异步逻辑
   点击按钮时先切换加载状态，执行登录请求后再恢复状态，确保UI能及时更新：

   onPressed: _isLoading ? null : () async {
     setState(() {
       _isLoading = true; // 开启加载状态，触发UI更新
     });
   
     var service = Services();
     var response = await service.login(username.text, password.text);
   
     if (response.statusCode == 200) {
       SharedPreferences prefs = await SharedPreferences.getInstance();
       prefs.setString('myUsername', username.text);
       if (mounted) { // 避免Widget已销毁时执行导航报错
         Navigator.push(
           context,
           MaterialPageRoute(builder: (context) => const HomePage()),
         );
       }
     }
   
     setState(() {
       _isLoading = false; // 结束加载状态，恢复按钮原态
     });
   },
   

3. 切换按钮的显示内容
   根据_isLoading的值，让按钮在加载时显示SpinKitWave，否则显示原按钮文本：

   ElevatedButton(
     style: ElevatedButton.styleFrom(backgroundColor: Colors.blue), // 示例样式
     onPressed: _isLoading ? null : () async { /* 上述异步逻辑 */ },
     child: _isLoading
         ? const SpinKitWave(color: Colors.white, type: SpinKitWaveType.start)
         : const Text('登录', style: TextStyle(color: Colors.white)),
   )
   

补充说明： #

• 用setState更新状态后，Flutter会重新构建对应的Widget，从而实现加载动画的显示/隐藏。
• 将加载时的onPressed设为null，可以禁用按钮，防止用户重复触发登录请求。
• mounted判断是为了避免异步请求完成后，当前页面已经被销毁（比如用户中途返回），调用Navigator或setState引发错误。

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