Flutter GetX：如何基于FirestoreQueryBuilder实现页面间数据传递

1. 修正数据存储方式 #

别用int作为Map的键，直接用Firestore文档自带的唯一documentId作为标识，或者更直观的方式：用List<OfferData>存储数据，同时给OfferData类添加documentId字段，确保每条数据和Firestore中的记录一一对应。

示例代码：

// 给OfferData添加documentId字段
class OfferData {
  final String documentId;
  final String title;
  // 其他业务字段...

  OfferData({required this.documentId, required this.title});

  // 从Firestore快照转模型时带上documentId
  factory OfferData.fromFirestore(DocumentSnapshot doc) {
    final data = doc.data() as Map<String, dynamic>;
    return OfferData(
      documentId: doc.id,
      title: data['title'],
      // 其他字段赋值
    );
  }
}

// 修改HomeController的存储逻辑
class HomeController extends GetxController {
  final RxList<OfferData> offers = RxList<OfferData>([]);

  void fetchOffers() {
    FirebaseFirestore.instance.collection('offers').snapshots().listen((snapshot) {
      offers.value = snapshot.docs.map((doc) => OfferData.fromFirestore(doc)).toList();
    });
  }
}

2. 在OfferCardView中绑定当前数据 #

生成列表时直接把当前的OfferData对象传递给OfferCardView，避免让View去Controller的集合里“猜”对应数据。

示例代码：

// 首页列表生成逻辑
FirestoreQueryBuilder<OfferData>(
  query: FirebaseFirestore.instance.collection('offers'),
  builder: (context, snapshot, child) {
    if (snapshot.isFetching) return const CircularProgressIndicator();
    return ListView.builder(
      itemCount: snapshot.docs.length,
      itemBuilder: (context, index) {
        final offer = OfferData.fromFirestore(snapshot.docs[index]);
        // 直接把当前offer传入OfferCardView
        return OfferCardView(offer: offer);
      },
    );
  },
)

// OfferCardView定义
class OfferCardView extends StatelessWidget {
  final OfferData offer;

  const OfferCardView({super.key, required this.offer});

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        // 跳转时传递offer的documentId或整个对象
        Get.to(() => OfferView(offerId: offer.documentId));
        // 也可以直接传对象：Get.to(() => OfferView(offer: offer));
      },
      child: Card(child: Text(offer.title)),
    );
  }
}

3. 在OfferView中获取对应数据 #

如果跳转时传的是documentId，就从HomeController的列表中匹配；如果直接传OfferData对象，直接使用即可。

示例代码：

// 方式1：通过documentId匹配数据
class OfferView extends StatelessWidget {
  final String offerId;

  const OfferView({super.key, required this.offerId});

  @override
  Widget build(BuildContext context) {
    final homeController = Get.find<HomeController>();
    final targetOffer = homeController.offers.firstWhere((o) => o.documentId == offerId);
    return Scaffold(
      appBar: AppBar(title: Text(targetOffer.title)),
      body: // 渲染详情内容
    );
  }
}

// 方式2：直接接收OfferData对象
class OfferView extends StatelessWidget {
  final OfferData offer;

  const OfferView({super.key, required this.offer});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(offer.title)),
      body: // 渲染详情内容
    );
  }
}

为什么原来的Map方案不合适？ #

• int键和Firestore文档的唯一标识无关联，数据刷新（排序、增删）后，索引和对应数据的关系会混乱，导致操作错误数据。
• Map的存储顺序和列表展示顺序不一定一致，进一步增加匹配错误的概率。

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