Flutter Firestore > Streambuilder > ListView to detailpage onTap答案

【问题标题】：Flutter Firestore > Streambuilder > ListView to detailpage onTapFlutter Firestore > Streambuilder > ListView to detailpage onTap
【发布时间】：2021-09-23 19:44:26
【问题描述】：

我正在改变我的应用获取数据的方式。我以前用 json 文件来做，但我现在改用 Firestore。我已经成功地使用 Streambuilder > ListView.builder 构建了一个列表，但我无法弄清楚如何将数据获取到详细信息页面。我似乎无法在互联网上找到任何解决方案。没有人在博客或教程中提及详细信息页面...

Streambuilder > ListView.Builder > List Items > Click item > Detailpage 具有相同的数据。

这是我目前所拥有的......

@override
  Widget build(BuildContext context) {
    SizeConfig().init(context);
    return new Scaffold(
      body: StreamBuilder(
        stream: FirebaseFirestore.instance.collection('Crete').
        where('prefecture', isEqualTo: 'Heraklion',).
        where('type', isEqualTo: 'historical site',).snapshots(),
        builder: (context, snapshot) {
        if (!snapshot.hasData) return const Center(child: CircularProgressIndicator(),);
        return ListView.builder(
          itemCount: snapshot.data.docs.length,
          itemBuilder: (context, index) =>
              _buildListItemHeraklionHistoricalSites(context, snapshot.data.docs[index]),
        );
      }),
    );
  }

_buildListItemHeraklionHistoricalSites：

Widget _buildListItemHeraklionHistoricalSites(BuildContext context, DocumentSnapshot document){
  return InkWell(
    onTap: () => DetailsPageHistory(),
    child: Container(
      width: SizeConfig.blockSizeHorizontal*90,
      height: SizeConfig.blockSizeVertical*20,
      margin: EdgeInsets.only(bottom: 15, left: 20, right: 20),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(10),
        image: DecorationImage(image: CachedNetworkImageProvider(document['image']),
        fit: BoxFit.cover,),
      ),
      child: Stack(
        children: [
          Container(
            decoration: BoxDecoration(
              color: Colors.black.withOpacity(0.2),
              borderRadius: BorderRadius.circular(10),
            ),
          ),
        ],
      )
    ),
  );
}

【问题讨论】：

标签： firebase flutter google-cloud-firestore stream-builder

【解决方案1】：

您可以通过构造函数将数据传递给DetailsPageHistory()。

改变这个：

    onTap: () => DetailsPageHistory(),

到这里：

    onTap: () => Navigator.push(
                   context,
                   MaterialPageRoute(builder: (context) => DetailsPageHistory(document: document)),
                 ),

在您的 DetailsPageHistory 小部件中，您可以像这样定义参数：

    class DetailsPageHistory extends StatelessWidget {
      final DocumentSnapshot document;
    
      const DetailsPageHistory({Key key, @required this.document,}) : super(key: key);

      @override
      Widget build(BuildContext context) {
        ...
      }

查看如何send data to a new screen

【讨论】：

谢谢！！！！！！这非常有效。现在我可以继续了。谢谢！