在onPress颤动之前,如何根据条件更改listView负载上IconButton的颜色?

时间:2020-10-02 17:41:33

标签: flutter listview colors icons

我有ListView个帖子,每行或每个帖子都有IconButton个。现在用户可以喜欢任何帖子。我需要检查用户是否喜欢某个帖子,并且该帖子的IconButton会是蓝色的。用户不喜欢的帖子,IconButton颜色为灰色。当帖子列表正在加载时,我需要检查它。

列表:

    children: <Widget> [
        Row(
           children: <Widget>[
           new IconButton(
           icon: new Icon(Icons.thumb_up),

           // documentId = list[index].id;
           // want to get documentId in this way from here and pass this documentId to the method like  checkPostLikedOrNot(documentId); 
           //  checkFeedLikedOrNot(documentId ); 
           // want to call this method here and check the conditon    
           
          color:(isPressed) ? Color(0xff007397) : Color(0xff9A9A9A),
           onPressed: (){
             print(widget.userId); // userId
             documentId = list[index].id;
             _counter = list[index].data()["like_count"];
             _incrementCounter(); // updating table with userId in this method
              },
            ),
          ],
        ),
      ],

检查方法:

    checkFeedLikedOrNot(documentId) async{
      DocumentReference docRef = FirebaseFirestore.instance.collection('post').doc(documentId);
      DocumentSnapshot docSnapshot = await docRef.get();
      List likedUser = docSnapshot.data()['liked_user_id'];
      if(likedUser.contains(widget.userId) == true){
         print('user already exist=='+ widget.userId);
         //color will be blue
      }else{
         //color will be grey
    }
  }

构建ListView

return ListView.builder(
                  shrinkWrap: true,
                  primary: false,
                  itemCount: list.length,
                  itemBuilder:(context, index)  {
                    print(index);
                    return Card(
                      elevation: 5,
                      shape: Border(bottom: BorderSide(color: Colors.lightBlue, width: 5)),
                        child: Column(
                            children: <Widget> [
                              ListTile(

我该怎么做?

1 个答案:

答案 0 :(得分:0)

关于提高安全性的说明:您的API应该具有一种方法来检查用户是否喜欢userIdpostId的帖子(或使用userId获取给定Future<bool>的所有喜欢的帖子的ID)分页)。这不是让所有喜欢该帖子的用户的好方法。

您可以使用FutureBuilder

检查方法应返回 Future<bool> checkFeedLikedOrNot(documentId) async { DocumentReference docRef = FirebaseFirestore.instance.collection('post').doc(documentId); DocumentSnapshot docSnapshot = await docRef.get(); List likedUser = docSnapshot.data()['liked_user_id']; return likedUser.contains(widget.userId); }

FutureBuilder

然后您可以使用Icon来获取 Widget getIcon(documentId) { return FutureBuilder<bool>( builder: (BuildContext context, AsyncSnapshot<bool> snapshot) { Color color = Colors.grey; // set proper default color if (snapshot != null && snapshot.connectionState == ConnectionState.done && snapshot.hasData != null) { color = Colors.blue; // set proper "liked" color } return Icon( Icons.thumb_up, color: color, ); }, future: checkFeedLikedOrNot(documentId), ); }

IconButton

并在new IconButton( icon: getIcon(list[index].id), // documentId = list[index].id; // want to get documentId in this way from here and pass this documentId to the method like checkPostLikedOrNot(documentId); // checkFeedLikedOrNot(documentId ); // want to call this method here and check the conditon color:(isPressed) ? Color(0xff007397) : Color(0xff9A9A9A), onPressed: (){ print(widget.userId); // userId documentId = list[index].id; _counter = list[index].data()["like_count"]; _incrementCounter(); // updating table with userId in this method }, ),

中使用此方法
    Handler handler = new Handler();
    handler.postDelayed(new Runnable() {

            @Override
            public void run() {
                //Your task it will execute at 1 time only...
                onBackPressed();{
                    if (webview.isFocused() && webview.canGoBack()) {
                        webview.goBack();  
                    } 

                    if(mRewardedVideoAd.isLoaded()) {
                        mRewardedVideoAd.show();


                    }
                }
            }
        }, 5000);//5 seconds delay and you can change the delay  time...