尝试显示来自 Firestore 的列表数据导致 flutter 中的像素溢出

Question

我正在尝试使用以下代码显示来自 firestore 的数据列表：

@override
  Widget build(BuildContext context) {
    // <1> Use FutureBuilder
    return FutureBuilder<QuerySnapshot>(
        // <2> Pass `Future<QuerySnapshot>` to future
        future: FirebaseFirestore.instance.collection('UserNames').get(),
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            // <3> Retrieve `List<DocumentSnapshot>` from snapshot
            final List<DocumentSnapshot> documents = snapshot.data.docs;
            return ListView(
                children: documents
                    .map((doc) => Card(
                          child: ListTile(
                            title: Text(doc['displayName']),
                            subtitle: Text(doc['plastics'].toString()),
                          ),
                        ))
                    .toList());
          } else if (snapshot.hasError) {
            return Text('Its Error!');
          }
        });
  }

这段代码在一个名为 Scoreboard() 的 class 中，我正试图从另一个名为 createdGroupHomePage() 的 class 调用它：

@override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        backgroundColor: Palette.lightGreen,
        title: const Text('Group Home'),
        leading: GestureDetector(
          onTap: () {
            Navigator.of(context)
                .pushAndRemoveUntil(HomeScreen.route, (route) => false);
          },
          child: Icon(
            Icons.arrow_back_ios,
            color: Colors.white,
          ),
        ),
      ),
      body: Builder(
        builder: (context) => Container(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget>[
              Align(
                alignment: Alignment.center,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    SizedBox(
                      height: 50,
                    ),
                    FutureBuilder(
                      future: getGroupName(),
                      builder: (_, AsyncSnapshot snapshot) {
                        if (snapshot.connectionState ==
                            ConnectionState.waiting) {
                          return Center(
                              child: CircularProgressIndicator(
                            backgroundColor: Palette.lightGreen,
                          ));
                        }
                        return Text(snapshot.data,
                            style: TextStyle(
                                color: Palette.lightGreen, fontSize: 30));
                      },
                    ),
                    SizedBox(height: 20),
                    Scoreboard(),  // Right here I am trying to display the list contents
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

不幸的是，当我转到应用程序中的页面时，它说像素溢出但有 9,000 点左右，我真的不知道该怎么办。我是否必须将 Scoreboard() 包裹在某些东西中，还是其他东西？

Answer 1

由于 ListView 小部件没有设置高度，因此必须将其包裹在具有设置高度的小部件内才能放置在 Column 内。如果你想让 ListView 占据所有剩余的 space，你可以用这样的 Expanded 小部件包装它：

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            SizedBox(
              height: 50,
            ),
            FutureBuilder(
              future: getGroupName(),
              builder: (_, AsyncSnapshot snapshot) {
                if (snapshot.connectionState == ConnectionState.waiting) {
                  return Center(child: CircularProgressIndicator());
                }
                return Text(snapshot.data,
                    style: TextStyle(fontSize: 30));
              },
            ),
            SizedBox(height: 20),
            Expanded(
              child: Scoreboard(),
            ), // Right here I am trying to display the list contents
          ],
        ),
      ),
    );
  }

尝试显示来自 Firestore 的列表数据导致 flutter 中的像素溢出

Attempt to display list data from Firestore causes overflow of pixels in flutter

flutter

google-cloud-firestore

flutter-futurebuilder