Question

在登录页面中，CircularProgressIndicator遇到问题。我想这样做。当用户点击“登录”按钮时，我希望该应用程序创建一个CircularProgressIndicator并踢出凸起按钮文本并添加CircularProgessIdnicator，然后我的应用程序从我的Web服务获取数据后，我想停止CircularProgessIndicator。有小费吗？谢谢。

实际代码（您可以毫无问题地进行编译，只需在依赖项中添加http：^ 0.12.0）即可。

实际系统的照片：

First step of login

Progress bar that I want to implement (I want to kick the raisedButton for a while)

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;


void main() => runApp(MaterialApp(home:MyApp()));

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool estaCargando = false;
  TextEditingController user = TextEditingController();
  TextEditingController phone = TextEditingController();
  Future<List> _loginn() async {
    var url = "https://pruebasxaviervelez.000webhostapp.com/login.php";
    final response = await http
        .post(url, body: {"usuario": user.text, "telefono": phone.text});
    print(response.body);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
          color: Colors.pink,
          child: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Container(
                  height: 100,
                  width: 100,
                  child: TextField(
                    controller: user,
                    decoration: InputDecoration(hintText: 'username'),
                  ),
                ),
                Container(
                  height: 100,
                  width: 100,
                  child: TextField(
                    controller: phone,
                    decoration: InputDecoration(hintText: 'password'),
                  ),

                ),
                RaisedButton(
                  child: Text('Log in'),
                  onPressed: (){
                    _loginn();
                  },
                )
              ],
            ),
          )),
    );
  }
}

Answer 1

是的，只要用户单击按钮，就可以调用setState（）方法。

bool _loading = false;

!_loading ? RaisedButton(
    child: Text('Log in'),
    onPressed: (){
       _loginn();
       setState(() => _loading = true);
    },
) : CircularProgressIndicator();

如果用户单击，则会将State _loading bool设置为true，并且小部件将重建为进度指示器

此外，获取数据后，再次调用setState方法。

Answer 2

只需按照以下步骤更改代码，

// Inside your _MyAppState class
bool isLoading = false;

// Inside your build method
isLoading ? RaisedButton(
                  child: Text('Log in'),
                  onPressed: async(){
                    setState((){
                       isLoading=true;
                    });
                    await _loginn();
                    setState((){
                       isLoading=false;
                    });
                  },
                )
           : Center(child:CircularProgressIndicator())

当您按下按钮时，首先我们通过setState方法将进度指示器的加载状态更改为true，这将重新呈现UI。

然后使用await关键字编写async loginn（）方法将等待该方法执行。

然后，它将使用setState方法将进度指示器状态更改为false，这将再次重新呈现UI。

异步/等待在Flutter的登录页面中执行CircularProgressIndicator

2 个答案: