firebase 如何修复< int>Flutter中应用栏标题中的未来示例?

xam8gpfp  于 2022-11-17  发布在  Flutter
关注(0)|答案(3)|浏览(122)

我希望Scaffold的appBar标题在启动时显示Firebase查询中的项目总数(长度),但它一直返回Instance of 'Future<int>'。我该如何解决这个问题?
下面是我的代码:

Query itemList = FirebaseFirestore.instance
      .collection('simple');
      
Future<int> itemCount() async => FirebaseFirestore.instance
      .collection('simple')
      .snapshots()
      .length;
      
...      

    return Scaffold(

            appBar: AppBar(
              title: Text("# Items: " + itemCount().toString()),
              
              // DISPLAYS: # Items: Instance of 'Future<int>'

不幸的是,它显示Instance of 'Future<int>'。我必须做什么修改才能获得项目计数(长度)并在标题文本中显示出来?
谢谢你,谢谢你

k2fxgqgv

k2fxgqgv1#

您可以像这样使用FutureBuilder:

AppBar(
    title: FutureBuilder<String>(
           future: itemCount(), 
           builder: (BuildContext context, AsyncSnapshot<int> snapshot) {
               if (snapshot.hasData) {
                  return Text("# Items: " + snapshot.data.toString());
               }else {
                  Text("No data");
               }
           }),
     )
jmp7cifd

jmp7cifd2#

你 正在 调用 一 个 " Future " 函数 , 这个 函数 返回 一 个 Future , 所以 你 不能 这样 显示 它 , 你 需要 使用 一 个 await ( 如果 你 在 异步 函数 中 ) 或 一 个 .then() ( 如果 你 不在 异步 函数 中 ) 。 在 你 的 情况 下 打印 它 的 最 好 方法 是 使用 一 个 FutureBuilder 或 关键 字 await 。

0g0grzrc

0g0grzrc3#

经过一些试验,我得出结论,我需要使用StreamBuilder。以下是修复此问题的解决方案:

appBar: AppBar(
              title: StreamBuilder(
                stream: itemList.snapshots(),
                builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {

                  if (snapshot.connectionState == ConnectionState.waiting) {
                    return const Text("# Items: ...");
                  }

                  else if (snapshot.hasData) {
                    return Text("# Items: ${snapshot.data?.docs.length ?? 0}");
                  }

                  else {
                    return const Text('# Items: 0');
                  }

                },  // Item Builder
              ),  // Stream Builder
            ),  // App Bar

appBar标题中包含#个项目的已完成项目的屏幕快照:

浮动操作按钮可将项目添加到列表中,而onTap可从列表中删除所选项目。标题保持更新。

  • 我希望这能对未来有所帮助 *

相关问题