如何在Flutter中使用Column或ListView类包装StreamBuilder类?

Fer*_*etz 5 dart firebase flutter google-cloud-firestore

我的Flutter应用出现问题,我有一个仅返回StreamBuilder的类,它运行良好,可以显示Cloud Firestore中的数据。但是,当我尝试将此类包装在Column或ListView类中时,它什么也没显示。

我需要它来显示当前页面的名称。而且AppBar类已经具有应用程序名称,因此我也不能使用它。

有谁知道我该如何包装并保持运行?

示例代码正常工作

  class NewCardsList extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return new StreamBuilder<QuerySnapshot>(
      stream: firestore.collection('cards_list').snapshots(),
      builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
        if (!snapshot.hasData) return const Text('Connecting...');
        final int cardLength = snapshot.data.documents.length;
        return new ListView.builder(
          itemCount: cardLength,
          itemBuilder: (int index) {
            final DocumentSnapshot _card= snapshot.data.documents[index];
            return new ListTile(
              title: new Text(_card['title']),
              subtitle: new Text(_card['description']),
            );
          },
        );
      },
    );
  }
}
Run Code Online (Sandbox Code Playgroud)

示例代码不起作用

class NewCardsList extends StatelessWidget {

      @override
      Widget build(BuildContext context) {
        return new Column(
          children: <Widget> [
            Text("Your Card List"),
            StreamBuilder<QuerySnapshot>(
          stream: firestore.collection('cards_list').snapshots(),
          builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
            if (!snapshot.hasData) return const Text('Connecting...');
            final int cardLength = snapshot.data.documents.length;
            return new ListView.builder(
              itemCount: cardLength,
              itemBuilder: (int index) {
                final DocumentSnapshot _card= snapshot.data.documents[index];
                return new ListTile(
                  title: new Text(_card['title']),
                  subtitle: new Text(_card['description']),
                );
              },
            );
          },
        ]));
      }
    }
Run Code Online (Sandbox Code Playgroud)

Raj*_*Jr. 8

用Flexible()包装Streambuilder,然后用Column()包装Flexible,将column设置为scaffold()的主体

  • 是的,这很完美!@Fernando 请将这个答案标记为正确 (2认同)