async/await 在 Flutter 的登录页面中执行 CircularProgressIndicator

Question

我在登录页面中遇到 CircularProgressIndicator 问题。我想这样做。当用户点击 "log in" 按钮时，我希望该应用程序创建一个 CircularProgressIndicator 并踢出 raisedButton 文本并添加 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();

如果用户点击，那么它将 setState _loading bool 设置为 true 并且小部件将重建为 Progress Indicator

另外，获取数据后再次调用 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。

async/await 在 Flutter 的登录页面中执行 CircularProgressIndicator

async/await to do CircularProgressIndicator in a Login Page in Flutter

flutter

flutter-layout

flutter-animation

flutter-web