我必须去这个屏幕两次才能从 fetchAndSet 中加载数据

Posted 2023-02-23

【中文标题】我必须去这个屏幕两次才能从 fetchAndSet 中加载数据

【英文标题】：I have to go to this screen twice to load data from fetchAndSet in flutter

【发布时间】：2022-01-15 18:20:16

【问题描述】：

当我第一次访问该页面时，它只显示圆形进度指示器。当我第二次访问该页面时返回后，出现了 circularProgressIndicator 并且其他 listview.builder 完美显示。我已经更新了有问题的代码。非常感谢任何形式的帮助。

FutureBuilder(
  future: Provider.of<AppointmentsProvider>(context, listen: false)
      .fetchAndSetAvailableSlots(),
  builder: (ctx, snapShot) => Column(
    children: [
      Container(
        margin: EdgeInsets.all(5),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(10),
          color: Colors.blue,
        ),
        child: SizedBox(
          height: 380,
          child: snapShot.connectionState == ConnectionState.waiting
              ? Center(
                  child: CircularProgressIndicator(
                    color: Colors.white,
                  ),
                )
              : ListView.builder(
                  itemCount: list.length,
                  itemBuilder: (ctx, i) => Card(
                    elevation: 5,
                    margin: EdgeInsets.all(10),
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(10.0)),
                    child: CheckboxListTile(
                      secondary: Icon(
                        Icons.alarm,
                      ),
                      activeColor: Colors.green,
                      // checkColor: Colors.black,
                      selectedTileColor: Colors.blue,
                      // tileColor: Colors.greenAccent,
                      title: Text(list[i].time),
                      value: list[i].isSelected,
                      onChanged: (value) 
                        onCheckChanged(list[i], list, value);
                      ,
                    ),
                  ),
                ),
        ),
      ),
      ElevatedButton.icon(
        onPressed: () async 
          await Firebase.initializeApp();
          FirebaseFirestore.instance.collection('appointments').add(
            'id': DateTime.now().toString(),
            'date': widget.formatDate,
            'description': 'description etc.',
            'type': 'type etc.',
            'uid': 'uid etc.',
            'timeSlot': timeSlot,
          );
        ,
        icon: Icon(Icons.arrow_forward),
        label: Text('Add Now!'),
      ),
    ],
  ),
);

---这里是fetchAndSet函数---

Future<void> fetchAndSetAvailableSlots() async 
await Firebase.initializeApp();
QuerySnapshot<Map<String, dynamic>> data = await FirebaseFirestore.instance
    .collection('appointments')
    .where('date', isEqualTo: 'Dec 11, 2021')
    .get();
List<TimeSlot> bookedSlots = [];

data.docs.forEach(
  (element) async 
     FirebaseFirestore.instance.collection('Questions').doc(userId).get();
    DocumentSnapshot<Map<String, dynamic>> item = await FirebaseFirestore
        .instance
        .collection('appointments')
        .doc('$element.id')
        .get();

    bookedSlots
        .add(TimeSlot(isSelected: false, time: item.data()['timeSlot']));
  ,
);
availableTimeSlots = bookedSlots;
print(bookedSlots);
notifyListeners();

【参考方案1】：

首先我建议搬家

Firebase.initializeApp();

进入你的 runApp 函数。

关于您的第二个问题，您似乎正在使用 Provider。如果是这样，我建议通过布尔加载确定是否等待获取数据仍在运行。 Futurebuilder/Streambuilder 也可能有助于显示该数据。如果获取数据，您的问题听起来像小部件不会重建

【讨论】：

非常感谢您的建议。我正在使用futureBuilder。

很高兴，如果此答案对您有帮助，请将其标记为已为其他人解决

【参考方案2】：

在返回 ListView.builder 之前检查列表。如果列表为空，则返回 CircularProgressIndicator()，如果列表获得一些数据，则返回列表视图。另一方面，将数据添加到 setState() 中的 bookSlots 列表中。

【讨论】：

我已经更新了代码。现在有什么建议吗？