Question

我现在在一个页面中调用了三个Web服务，因为我只想显示一个CircularProgressIndicator。如何在CircularProgressIndicator显示所有UI后打开屏幕时如何首先显示CircularProgressIndicator。

Answer 1

在等待合并的Future.wait完成之前，使用FutureBuilder合并三个期货（Web服务调用），然后使用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"),
    );
  }
}

如何在flutter中添加CircularProgressIndicator？

1 个答案: