flutter - 如何在颤振中添加 CircularProgressIndicator?
问题描述
我现在在一页中调用了三个 Web 服务,因为我只想显示一个 CircularProgressIndicator。当我在 CircularProgressIndicator 显示所有 UI 后打开屏幕时,如何首先显示 CircularProgressIndicator。
解决方案
用于Future.wait
合并三个期货(Web 服务调用),然后在等待合并完成时用于FutureBuilder
显示。CircularProgressIndicator
Future
试试这样
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
String _data1;
String _data2;
String _data3;
Future<void> _webCall;
@override
void initState() {
_webCall = _callWebServices();
super.initState();
}
Future<bool> _callWebServices() async {
await Future.wait([_webService1(), _webService2(), _webService3()]);
return true;
}
Future<void> _webService1() async {
await Future.delayed(const Duration(seconds: 1)); //TODO: do webservice call `get` or `post`
_data1 = "This is data1"; //TODO: save the data
}
Future<void> _webService2() async {
await Future.delayed(const Duration(seconds: 5)); //TODO: do webservice call `get` or `post`
_data2 = "This is data2"; //TODO: save the data
}
Future<void> _webService3() async {
await Future.delayed(const Duration(seconds: 3)); //TODO: do webservice call `get` or `post`
_data3 = "This is data3"; //TODO: save the data
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Demo"),
),
body: FutureBuilder(
future: _webCall,
builder: (context, snapshot) {
print(snapshot);
if (snapshot.connectionState == ConnectionState.waiting)
return _buildProgressIndicator();
else if (snapshot.hasError)
return _buildError();
else
return _buildBody();
},
),
);
}
Widget _buildProgressIndicator() {
return Center(
child: CircularProgressIndicator(),
);
}
Widget _buildBody() {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(_data1),
Text(_data2),
Text(_data3),
],
),
);
}
Widget _buildError() {
return Center(
child: Text("Error while loading Web Services"),
);
}
}
推荐阅读
- c# - 异步数据加载但 UI 变得无响应 WPF
- azure - 在 MVC 应用程序中添加 Azure Active Directory 用户
- javascript - 错误:用户 'postgres'@'localhost' 的访问被拒绝(命令行)
- sql - 使用 If Exists 语句更新或插入行的 SQL 查询不起作用
- python - Dask between_time 是否存在?
- kotlin - 如何在 Kotlin 中减去 2 个浮点数
- monaco-editor - Monarch语言中的括号不起作用/不折叠
- c# - 为什么只使用一个 DataTrigger?
- groovy - 在 Groovy 脚本中配置 Jenkins 更新通道以实现稳定发布?
- c++ - 将重载的构造函数传递给类之间的函数