firebase - 使用 flutter 从 firebase 实时数据库中读取 child 的数量

Question

我是 Flutter 的新手，我真的需要帮助解决我从 firebase 实时数据库读取/计算 child 数量的问题。

• 我使用的数据库有几个类别。
• 每个类别都有几个案例。

我想要的是从数据库中提取信息，每个类别有多少个案例，并在列表中显示此信息。这意味着 - 显示类别的名称和这个类别有多少 child (案例)(totalCases)......

这是我的代码，我正在努力解决:

    import '../components/category_list_tile.dart';
    import 'package:firebase_database/ui/firebase_animated_list.dart';
    import 'package:flutter/material.dart';
    import 'package:modal_progress_hud/modal_progress_hud.dart';
    import '../constants.dart';
    import 'package:firebase_core/firebase_core.dart';
    import 'package:firebase_database/firebase_database.dart';
    import 'dart:async';
    
    class ScreenCategoryList extends StatefulWidget {
      static String id = 'screen_category_list';
      final FirebaseApp app;
    
      ScreenCategoryList({this.app});
      @override
      _ScreenCategoryListState createState() => _ScreenCategoryListState();
    }
    
    class _ScreenCategoryListState extends State<ScreenCategoryList> {
      final referenceDatabase = FirebaseDatabase.instance;
      final _dbRef = FirebaseDatabase.instance.reference().child("de");
    
      static int number = 100;
      bool showSpinner = false;
      DatabaseReference _databaseReference;
    
      @override
      void initState() {
        final FirebaseDatabase database = FirebaseDatabase(app: widget.app);
        _databaseReference = database.reference().child("de");
        super.initState();
      }
    
      @override
      Widget build(BuildContext context) {
        return Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              colors: [Colors.white, Colors.white],
            ),
            image: const DecorationImage(
                image: AssetImage("images/background.png"), fit: BoxFit.cover),
          ),
          child: Scaffold(
            backgroundColor: Colors.transparent,
            appBar: AppBar(
              toolbarHeight: 60.0,
              elevation: 0.0,
              backgroundColor: Colors.black12,
              leading: Padding(
                  padding: EdgeInsets.only(left: 12.0, top: 12.0, bottom: 12.0),
                  child: Image(image: AssetImage('images/lexlogo_black.png'))),
              title: Center(
                child: Column(
                  children: [
                    Text(
                      'Kategorien',
                      style: TextStyle(
                          color: kMainDarkColor,
                          fontFamily: 'Roboto',
                          fontSize: 21.0,
                          fontWeight: FontWeight.bold),
                    ),
                  ],
                ),
              ),
              actions: [
                Padding(
                  padding: EdgeInsets.only(right: 8.0),
                  child: IconButton(
                    icon: Icon(Icons.more_vert_rounded),
                    iconSize: 30.0,
                    color: kMainDarkColor,
                    onPressed: () {},
                    //onPressed: onPressMenuButton,
                  ),
                ),
              ],
            ),
            body: ModalProgressHUD(
              inAsyncCall: showSpinner,
              child: FirebaseAnimatedList(
                query: _databaseReference.child('category'),
                itemBuilder: (
                  BuildContext context,
                  DataSnapshot snapshot,
                  Animation<double> animation,
                  int index,
                ) {
                  Future<int> getNumberOfNodes() async {
                    final response = await FirebaseDatabase.instance
                        .reference()
                        .child('de')
                        .child('category')
                        .child('$index')
                        .child('cases')
                        .once();
                    var nodes = [];
                    response.value.forEach((v) => nodes.add(v));
    
                    return nodes.length;
                  }
    
                  var myNumber = getNumberOfNodes();
                  int myInt = 99;
                  myNumber.then((value) {
                    myInt = value;
                  });
                  number = myInt;
    
                  return CategoryListTile(
                    title: snapshot.value['name'].toString(),
                    successfulCases: 1,
                    totalCases: number,
                    onTitleClick: () {},
                    onInfoButtonClick: () {},
                  );
                },
                reverse: false,
                padding: EdgeInsets.symmetric(horizontal: 10.0, vertical: 20.0),
              ),
            ),
          ),
        );
      }
    }

Answer 1

既然你声明了Future<int> getNumberOfNodes() async , 你需要 FutureBuilder显示该值。

像这样:

  child: FutureBuilder<int>(
    future: FirebaseDatabase.instance
            .reference()
            .child('de')
            .child('category')
            .child('$index')
            .child('cases')
            .once();
        var nodes = [];
        response.value.forEach((v) => nodes.add(v));
        return nodes.length;
      }
    builder: (BuildContext context, AsyncSnapshot<int> snapshot) {
      List<Widget> children;
      if (snapshot.hasData) {
        return Text("Case count: "+snapshot.data);
      } else if (snapshot.hasError) {
        return Text('Error: ${snapshot.error}'),
      } else {
        return CircularProgressIndicator();
      }
    },
  )

我没有编译或运行这段代码，所以请将其视为伪代码。如果您在使用它时遇到任何错误，请尝试通过搜索错误消息来修复它们，然后再报告。

所以 future是确定值的代码，然后是builder根据该值是否可用呈现正确的 UI。您需要替换 Text("Case count: "+snapshot.data)使用你自己的用户界面，所以 CategoryListTile(...) .