async/await 在 Flutter 的登录页面中执行循环进度指示器

Question

我在登录页面中遇到循环进度指示器的问题。我想这样做。当用户点击"登录"按钮时，我希望应用程序制作一个循环进度指示器并踢出的按钮文本并添加循环进度指示器，然后我的应用程序从我的网络服务获取数据，我想停止循环进度指示器。有什么提示吗？谢谢。

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

实际系统的照片：

登录的第一步

我想实现的进度条(我想踢一会儿凸起的按钮(

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

只需按如下方式更改代码，

// 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 关键字编写异步 loginn(( 方法将等待该方法被执行。

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

Answer 2

是的，你可以，如果用户点击了按钮，只需调用setState((方法。

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

如果用户单击，则它将状态_loading布尔值设置为 true，并且小部件将重建为进度指示器

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