Question

我有一个喜欢的图标，旁边有喜欢的图标，当我按下按钮时，它会更改图标，但不会增加数字，只有在重新加载页面时才会增加，如何更改？

class LanchonetesContact extends StatefulWidget {
final DocumentSnapshot lanchonetes;

LanchonetesContact(this.lanchonetes);

@override
_LanchonetesContactState createState() => _LanchonetesContactState();
}

class _LanchonetesContactState extends State<LanchonetesContact> {
bool liked = false;

void _pressed() {
setState(() {
  liked = !liked;

});
}

void _changeLikes() {
setState(() {
  if (liked) {
    Firestore.instance
        .collection('lanchonetes')
        .document(widget.lanchonetes.documentID)
        .updateData({'likes': FieldValue.increment(1)});
  } else {
    Firestore.instance
        .collection('lanchonetes')
        .document(widget.lanchonetes.documentID)
        .updateData({'likes': FieldValue.increment(-1)});
  }
  });
 }



@override
Widget Padding(
        padding: EdgeInsets.only(top: 0.0),
        child: Card(
            elevation: 1.0,
            child: GestureDetector(
              child: Container(
                height: 70.0,
                width: 390.0,
                color: Colors.white,
                child: Padding(
                  padding: EdgeInsets.symmetric(
                      vertical: 15.0, horizontal: 15.0),
                  child: Row(
                    children: <Widget>[
                      Padding(
                        padding:
                            const EdgeInsets.only(left: 100.0, bottom: 30),
                        child: Icon(
                          liked ? Icons.favorite : Icons.favorite_border,
                          color: Colors.black,
                          size: 50.0,
                        ),
                      ),
                      Text(
                        widget.lanchonetes.data["likes"].toString(),
                        style: TextStyle(fontSize: 40.0),
                      ),
                    ],
                  ),
                ),
              ),
              onTap: () {
                _pressed();
                _changeLikes();

              },
            )),
      ),

我还注意到，它不保持状态，如果我导航到另一个页面，则返回后将不再喜欢该Icon。关于如何处理这些情况的任何想法？

Answer 1

函数updateData是异步的，因此在更改DocumentSnapshot数据之前会更新setState。要解决此问题，您可以执行以下操作：

void _changeLikes() {
 Firestore.instance
        .collection('lanchonetes')
        .document(widget.lanchonetes.documentID)
        .updateData({'likes': FieldValue.increment(liked ? 1 : -1)
        .then((_) => setState(() => {}))
}

虽然此方法应该可以工作，但是有更好的方法来使用firestore：

带STREAMBUILDER的防火墙

使用带有文档快照的streambuilder包装内容：

StreamBuilder(
    stream: Firestore.instance
        .collection('lanchonetes')
        .document(widget.lanchonetes.documentID).snapshots(),
    builder: (context, snapshot) => Text(
         snapshot.data.data["likes"].toString(),
         style: TextStyle(fontSize: 40.0),
    ) //DocumentSnapshot is in snapshot.data,
 );

和

void _changeLikes() {
 Firestore.instance
        .collection('lanchonetes')
        .document(widget.lanchonetes.documentID)
        .updateData({'likes': FieldValue.increment(liked ? 1 : -1);    
}

如何用抖动来改变状态并保持当前状态？

1 个答案:

带STREAMBUILDER的防火墙