Question

我正在使用StreamBuilder用Firebase数据填充列表视图。效果很好，但是一旦将StreamBuilder放在新的Column小部件的“子级”字段中，列表视图就不再可见。

这是构建ListView的代码：

Widget _buildBody(BuildContext context) {
    return new StreamBuilder<QuerySnapshot>(
      stream: Firestore.instance.collection('sessions').snapshots(),
      builder: (context, snapshot) {
        if (snapshot.data == null) return LinearProgressIndicator();

        return _buildList(context, snapshot.data.documents);
      },
    );
  }

Widget _buildList(BuildContext context, List<DocumentSnapshot> snapshot) {
    return ListView(
      padding: const EdgeInsets.only(top: 20.0),
      children: snapshot.map((data) => _buildListItem(context, data)).toList(),
    );
  }

如何解决此问题以在Column小部件中使用StreamBuilder？（我想在listView旁边添加许多其他小部件。）

Answer 1

听起来您的问题不是真的需要将StreamBuilder放在Column中，而是要让ListView不能占据整个屏幕。这是一种将ListView和Column并排放置的解决方案，它们各自占据屏幕宽度的50％。

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Row(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            Container(
              width: MediaQuery.of(context).size.width * 0.5,
              child: ListView.builder(
                itemCount: 20,
                  itemBuilder: (context, index){
                return Text('Session $index');
      }),
            ),
            Container(
              width: MediaQuery.of(context).size.width * 0.5,
              child: Column(
                children: <Widget>[
                  Container(
                    height: 100,
                    color: Colors.blue,
                  ),
                  Container(
                    height: 50,
                    color: Colors.orange,
                  ),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}

在“列”窗口小部件中使用StreamBuilder

1 个答案: