在 Column 小部件中使用 StreamBuilder

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,
                  ),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}