Question

我是新手。以下是我从名为post的Firestore集合中获取数据的代码。第一次加载应用程序时需要花费几秒钟的时间才能加载数据，直到显示黑屏为止。问题仅在第一次出现时出现。微调器或其他东西，直到数据加载？（并不是说这不是全部代码）

class ForumHome extends StatefulWidget {
  @override
  _ForumHomeState createState() => _ForumHomeState();
}

dbMethods dbcrud = new dbMethods();

class _ForumHomeState extends State<ForumHome> {
  String title, content;
  //Subscribing for post details
  StreamSubscription<QuerySnapshot> subscription;
  List<DocumentSnapshot> snapshot;
  CollectionReference collectionReference =
      Firestore.instance.collection("posts");

  @override
  void initState() {
    super.initState();
    subscription = collectionReference.snapshots().listen((datasnapshot) {
      setState(() {
        snapshot = datasnapshot.documents;
      });
    });
  }

  @override
  Widget build(BuildContext context) {

    int num = snapshot?.length ?? 0;
    return Scaffold(
      appBar: AppBar(title: Text('Idea Forum '), backgroundColor: Colors.pink),
      body: new ListView.builder(
        itemCount: num,
        itemBuilder: (context, index) {
          return new Card(
            elevation: 15.0,
            margin: EdgeInsets.all(10.0),
            child: new ListTile(
                onTap: () {
                  //For udating the view count
                  snapshot[index]
                      .reference
                      .updateData({'Views': snapshot[index].data['Views'] + 1});

Answer 1

我建议为circleProgress创建一个控制器，如示例所示：

class _testProgressState extends State<testProgress> {

bool _progressController = true;


@override
void initState() {
  super.initState();

  subscription = collectionReference.snapshots().listen((datasnapshot) {
    setState(() {
      snapshot = datasnapshot.documents;
      _progressController = false;
    });
  });

}

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: _progressController
        ? CircularProgressIndicator()
        : ListView.builder(
            itemCount: 3,
            itemBuilder: (context, index) {
              return Card();
            }),
  );
}
}

因此，只要发现需要调用某些函数来收集数据，只需将setState设置_controllerProgress设置为true，然后在数据到达时将其返回为false！

Answer 2

您需要评估连接状态。

body: new ListView.builder(
        itemCount: num,
        itemBuilder: (context, index) {
          if (snapshot.connectionState == ConnectionState.waiting)
          return CircularProgressIndicator();
          return new Card(
            elevation: 15.0,
            margin: EdgeInsets.all(10.0),
            child: new ListTile(
                onTap: () {
                  //For udating the view count
                  snapshot[index]
                      .reference
                      .updateData({'Views': snapshot[index].data['Views'] + 1});

Answer 3

您需要创建将来的窗口小部件，

 FutureBuilder(
        future: YOUR_ASYNC_TASK_HERE,
        builder: (context, AsyncSnapshot<YOUR_RETURN_TYPE_FROM_ASYNC> snapshot) {
          return (snapshot.connectionState == ConnectionState.done)?HomePage():_buildWaitingScreen();
        },
      ),

对于_buildWaitingScreen，您可以使用

Widget _buildWaitingScreen() {
    return Scaffold(
      body: Container(
        alignment: Alignment.center,
        child: CircularProgressIndicator(),
      ),
    );
  }

Answer 4

您可以检查快照中是否有数据，并且在其加载时显示加载器。我也将您的listview扩展为单独的小部件

Widget _numcard(){
     if (snapshot != null) {
       ListView.builder(
            itemCount: num,
            itemBuilder: (context, index) {
              return new Card(
                elevation: 15.0,
                margin: EdgeInsets.all(10.0),
                child: new ListTile(
                    onTap: () {
                      //For udating the view count
                      snapshot[index]
                          .reference
                          .updateData({'Views': snapshot[index].data['Views'] + 1});
                    })});
          }else {return Container(
            child:CircularProgressIndicator());}}

从Firestore获取数据时如何显示加载微调器

4 个答案: