如何在类电商移动应用中点击后跳转新页展示Firebase文档属性

你需要在列表渲染、路由传参、详情页渲染三个环节完成配置，具体步骤如下： #

步骤1：列表页绑定点击事件并传参 #

你已经封装好了getStatus()方法获取Status集合的实时数据，直接在列表页用StreamBuilder渲染，给每个文档对应的列表项绑定点击跳转逻辑即可：

StreamBuilder<QuerySnapshot>(
  stream: getStatus(),
  builder: (context, snapshot) {
    if (snapshot.hasError) return const Text('加载出错');
    if (snapshot.connectionState == ConnectionState.waiting) {
      return const Center(child: CircularProgressIndicator());
    }
    // 渲染文档列表
    return ListView(
      children: snapshot.data!.docs.map((DocumentSnapshot doc) {
        Map<String, dynamic> statusData = doc.data()! as Map<String, dynamic>;
        return ListTile(
          // 替换成你自己集合里的字段名
          title: Text(statusData['productName'] ?? '无名称'),
          subtitle: Text(statusData['price']?.toString() ?? '无价格'),
          onTap: () {
            // 点击跳转详情页，两种传参方式二选一
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => StatusDetailPage(
                  // 方式1：直接传整个文档数据，跳转速度快
                  statusData: statusData,
                  // 方式2：仅传文档ID，详情页拉最新数据，适合数据变动频繁的场景
                  // docId: doc.id,
                ),
              ),
            );
          },
        );
      }).toList(),
    );
  },
)

步骤2：新建详情页接收参数并渲染 #

对应传参方式1的详情页实现 #

class StatusDetailPage extends StatelessWidget {
  final Map<String, dynamic> statusData;
  const StatusDetailPage({super.key, required this.statusData});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(statusData['productName'] ?? '商品详情')),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text('商品名称：${statusData['productName']}'),
            Text('售价：¥${statusData['price']}'),
            Text('库存：${statusData['stock']}'),
            Text('商品描述：${statusData['desc'] ?? '无描述'}'),
            // 按需添加其他需要展示的属性即可
          ],
        ),
      ),
    );
  }
}

对应传参方式2的详情页实现 #

class StatusDetailPage extends StatefulWidget {
  final String docId;
  const StatusDetailPage({super.key, required this.docId});

  @override
  State<StatusDetailPage> createState() => _StatusDetailPageState();
}

class _StatusDetailPageState extends State<StatusDetailPage> {
  Map<String, dynamic>? statusData;
  bool isLoading = true;

  @override
  void initState() {
    super.initState();
    loadDetailData();
  }

  Future<void> loadDetailData() async {
    var doc = await FirebaseFirestore.instance.collection('Status').doc(widget.docId).get();
    setState(() {
      statusData = doc.data();
      isLoading = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    if (isLoading) {
      return const Scaffold(body: Center(child: CircularProgressIndicator()));
    }
    return Scaffold(
      appBar: AppBar(title: Text(statusData!['productName'] ?? '商品详情')),
      // 后续渲染逻辑和方式1完全一致
    );
  }
}

补充说明 #

代码里的字段名需要替换成你自己Status集合里实际存储的属性字段，如果你的应用用了命名路由管理，把参数放到路由settings中传递即可。

内容的提问来源于stack exchange，提问作者EDMGL