Отобразить отдельный элемент из потока в PageView

Question

У меня есть следующий виджет, который использует PageView для отображения каждой книги на отдельной странице.

class Books extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _BooksState();
  }
}

class _BooksState extends State<Books> {
  PageController controller = PageController();
  String title = 'Title of the AppBar';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: PageView.builder(
        controller: controller,
        scrollDirection: Axis.horizontal,
        itemBuilder: (context, position) {
          return Center(position.toString());
          // return BooksStream();
        },
        onPageChanged: (x) {
          setState(() {
            title = '$x';
          });
        },
      ),
    );
  }
}

У меня также есть этот пример виджета из документов FlutterFire для получения всех документов изколлекция firestore:

class BooksStream extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return StreamBuilder<QuerySnapshot>(
      stream: Firestore.instance.collection('Books').snapshots(),
      builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
        if (snapshot.hasError) return new Text('Error: ${snapshot.error}');
        switch (snapshot.connectionState) {
          case ConnectionState.waiting:
            return new Text('Loading...');
          default:
            return new ListView(
              children:
                  snapshot.data.documents.map((DocumentSnapshot document) {
                return new ListTile(
                  title: new Text(document['title']),
                  subtitle: new Text(document['author']),
                );
              }).toList(),
            );
        }
      },
    );
  }
}

В PageView.builder, когда я возвращаю BooksStream (), он отображает все книги на каждой странице, что совершенно нормально.

Но как бы я использовал StreamBuilder дляпоказать каждую книгу на отдельной странице в PageView?

Спасибо.

Answer 1

Вы можете вернуть PageView.builder в ваше StreamBuilder builder поле следующим образом:

class BooksStream extends StatelessWidget {
  PageController controller = PageController();

  @override
  Widget build(BuildContext context) {
    return StreamBuilder<QuerySnapshot>(
      stream: Firestore.instance.collection('Books').snapshots(),
      builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
        if (snapshot.hasError) return new Text('Error: ${snapshot.error}');
        switch (snapshot.connectionState) {
          case ConnectionState.waiting:
            return new Text('Loading...');
          default:
            return PageView.builder( // Changes begin here
              controller: controller,
              scrollDirection: Axis.horizontal,
              itemCount: snapshot.data.documents.length,
              itemBuilder: (context, position) {
                final document = snapshot.data.documents[position];

                return ListTile(
                  title: new Text(document['title']),
                  subtitle: new Text(document['author']));
              }
            );
        }
      },
    );
  }
}

А затем просто внутри body вашего Scaffold вы можете создать свой экземпляр BooksStream.