如何更高效地编写这个 Flutter 代码？

Posted 2023-02-23

【中文标题】如何更高效地编写这个 Flutter 代码？

【英文标题】：How to write this Flutter code more efficiently?

【发布时间】：2020-01-18 07:41:47

【问题描述】：

正如您在第一部分中看到的，我正在检查某个值是否包含在来自 Firestore 的文档中并返回一个布尔值。现在我在构建中调用该函数，并根据该返回值更改芯片颜色（第二部分）。

现在的问题可能是因为我在构建函数中调用它，所以它在构建过程中被连续调用，这让我在 Firestore 中读取了大量数据，或者该函数效率低下。我怎样才能更有效地写这个？

checkAtt(String name, id , date) async
   var ref = _db.collection('subjects').document(id).collection('Att').document(date);
   var docref = await ref.get();
      return docref.data.containsKey(name)
        ?true
        :false;
  

 class PresentChip extends StatefulWidget 
  final candidate;
  PresentChip(
    this.candidate, 
    Key key,
  ) : super(key: key);
  @override
  _PresentChipState createState() => _PresentChipState();


class _PresentChipState extends State<PresentChip> 
  var isSelected = false;
  var c = false;
  @override
  Widget build(BuildContext context) 
    final SelectSub selectSub = Provider.of<SelectSub>(context);
    final Date date = Provider.of<Date>(context);

  db.checkAtt(widget.candidate, selectSub.selectsub, date.datenew).then((result)
    print(result);
    setState(() 
     c = result; 
    );
  ); 

       return Container(
      child: ChoiceChip(
        label: Text('Present'),
        selected: isSelected,
        onSelected: (selected) 
          db.gibAtt(
              widget.candidate, selectSub.selectsub, date.datenew.toString());
          setState(() 
            isSelected = selected;
          );
        ,
        backgroundColor: !c ?Colors.red :Colors.green ,
        selectedColor: !c ?Colors.red :Colors.green ,
    ));
  

【问题讨论】：

您应该在问题中发布图片，而不是在问题的 cmets 中

@Durdu 这样吗？

你应该直接添加代码，而不是图像。

@Durdu 好的....已编辑

我已经编辑了这个问题。以前它被表述为“任何人都愿意做一些免费的工作”，我现在已经改变了它，所以重点是你，这个帖子的作者，如何能够达到预期的结果。差异可能是微妙的，但它可以解释四次投反对票。

【参考方案1】：

假设您只想从 firestore 读取一次，您需要一个 FutureBuilder。

return Container(
  child: FutureBuilder(
    future: db.checkAtt(widget.candidate, selectSub.selectsub, date.datenew),
    builder: (context, snapshot) 
      if(snapshot.hasData)
      return ChoiceChip(
        ...
        backgroundColor: !snapshot.data ?Colors.red :Colors.green,
        selectedColor: !snapshot.data ?Colors.red :Colors.green,
      );

      //Return another widget if the future has no data
      return Text('Future has no data');
    
  )
);

如果您需要您的 UI 对来自 Firestore 的更改做出反应，请使用 StreamBuilder。

您可以从构建方法中删除以下块：

db.checkAtt(widget.candidate, selectSub.selectsub, date.datenew).then((result)
  print(result);
  setState(() 
   c = result; 
  );
);