Flutter中点击Prayed On Time后，对应ListView项如何变为绿色？

1. 定义祈祷数据模型 #

先创建映射Firestore文档的模型类，简化数据处理：

class Prayer {
  final String id;
  final String name;
  final bool prayedOnTime;

  Prayer({
    required this.id,
    required this.name,
    required this.prayedOnTime,
  });

  // 从Firestore快照转换为模型实例
  factory Prayer.fromFirestore(DocumentSnapshot doc) {
    final data = doc.data() as Map<String, dynamic>;
    return Prayer(
      id: doc.id,
      name: data['name'] ?? '',
      prayedOnTime: data['prayedOnTime'] ?? false,
    );
  }
}

2. 用StreamBuilder监听Firestore实时数据 #

通过Firestore的snapshots()流监听集合变化，确保数据更新时UI自动重建：

StreamBuilder<QuerySnapshot>(
  stream: FirebaseFirestore.instance.collection('prayers').snapshots(),
  builder: (context, snapshot) {
    if (snapshot.hasError) return const Text('加载失败');
    if (snapshot.connectionState == ConnectionState.waiting) return const CircularProgressIndicator();

    final prayers = snapshot.data!.docs.map((doc) => Prayer.fromFirestore(doc)).toList();

    return ListView.builder(
      itemCount: prayers.length,
      itemBuilder: (context, index) {
        final prayer = prayers[index];
        // 仅当Zohor已按时祈祷时，设置ListTile背景为绿色
        final tileColor = prayer.name == 'Zohor' && prayer.prayedOnTime ? Colors.green.shade100 : null;

        return ListTile(
          tileColor: tileColor,
          title: Text(prayer.name),
          onTap: () => _showPrayerActionSheet(context, prayer),
        );
      },
    );
  },
)

3. 实现底部弹窗与Firestore更新逻辑 #

编写弹窗方法，点击按钮时更新对应祈祷项的状态：

void _showPrayerActionSheet(BuildContext context, Prayer prayer) {
  showModalBottomSheet(
    context: context,
    builder: (context) => Padding(
      padding: const EdgeInsets.all(16.0),
      child: ElevatedButton(
        onPressed: () async {
          // 更新Firestore中对应文档的prayedOnTime字段
          await FirebaseFirestore.instance
              .collection('prayers')
              .doc(prayer.id)
              .update({'prayedOnTime': true});
          Navigator.pop(context); // 关闭弹窗
        },
        child: const Text('Prayed On Time'),
      ),
    ),
  );
}

核心逻辑说明 #

• 实时同步：Firestore的snapshots()流会在文档数据变更时自动触发StreamBuilder重建，所以状态更新后ListTile颜色会立即变化。
• 精准匹配：仅针对名称为Zohor且prayedOnTime为true的项设置绿色，避免其他祈祷项误触发变色。
• 文档ID依赖：模型中必须保留Firestore文档ID，确保能精准定位并更新目标数据。

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