flutter - 刷新屏幕中的一部分

Question

编辑-完整代码。我添加了SetState，它没有刷新。

class ForumPost extends StatefulWidget {
  @override
 _ForumPostState createState() => new _ForumPostState();
 final User user;
 final String postID; 
 final Features features;
  ForumPost({Key key, @required this.user, @required this.postID, @required this.features}) : super(key: key);
}

class _ForumPostState extends State<ForumPost> {
List<TabItem> navItems = <TabItem>[
TabItem(icon: Icons.home, title: 'Home'),
TabItem(icon: Icons.help_outline, title: 'Support'),
TabItem(icon: Icons.people, title: 'Contacts'),
TabItem(icon: Icons.chat_bubble, title: 'Forum')
  ];
 List data;
 Future<String> getPostsByCategory() async {
var response = await http.post(
  Uri.encodeFull("http://url/api/ForumPostByPostID"),
  headers: {"Content-Type": "application/json", 
             'Accept': 'application/json',},
  body: json.encode({'PostID' : widget.postID }));  
 this.setState(() {
 data = json.decode(response.body);
}
);

   return "Success!";
   }

 @override void initState() {

     this.getPostsByCategory();
 }

  @override
   Widget build(BuildContext context) {
   Future forumUpVote(String userid, String postID) async {

    final response =
       await http.post('http://url/api/ForumUpvote',
       headers: {"Content-Type": "application/json", 
                 'Accept': 'application/json',},
      body: json.encode({'userid' : userid , 'postID' : widget.postID}));

   if (response.statusCode == 204) {
    // Call was successful
   // Navigator.of(context).push(new MaterialPageRoute(builder: (BuildContext context) => new ForumPost(user: widget.user, postID: widget.postID, features: widget.features)));
       setState(() {
       });
    }
   }
        return new Scaffold(
     appBar:  AppBar(
     backgroundColor: Colors.grey,
     centerTitle: true,
     actions: <Widget>[

                  new IconButton( icon: new Icon(
                  FontAwesomeIcons.plusCircle,),
                   tooltip: 'Ask Question', 
                   onPressed: (){ 
                      Navigator.of(context).push(new MaterialPageRoute(builder: (BuildContext context) => new ForumAskQuestion( user: widget.user, features: widget.features)));

                     }
                ),

                new IconButton( icon: new Icon(
                  FontAwesomeIcons.search,),
                   tooltip: 'Search Community', 
                   onPressed: (){ 
                     print('pressed');

                     }
                )
     ]
),
  bottomNavigationBar: ConvexAppBar.builder(
    user: widget.user,
    features: widget.features,
    count: navItems.length,
    backgroundColor: Colors.grey[700],
    tabBuilder: (BuildContext context, int index, bool active) {
      var navigationItem = navItems[index];
      var _color = active ? Colors.white : Colors.white60;
      var _icon = active
          ? navigationItem.activeIcon ?? navigationItem.icon
          : navigationItem.icon;
      return Container(
        color: Colors.transparent,
        padding: EdgeInsets.only(bottom: 2),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.end,
          children: <Widget>[
            Icon(_icon, color: _color),
            Text(navigationItem.title, style: TextStyle(color: _color, fontSize: 12.0))
          ],
        ),
      );
    },
    actionBuilder: (BuildContext context, int index, bool active) {
      var _color = active ? Colors.white : Colors.white60;

      return Stack(
        alignment: Alignment.center,
        children: <Widget>[
          SizedBox(
            width: 60,
            height: 60,
            child: Container(
              decoration:
                  BoxDecoration(shape: BoxShape.circle, color: _color),
              child: Icon(
                Icons.chat_bubble,
                size: 40,
                color: Colors.red[200], 
              ),
            ),
          )
        ],
      );
    },
  ),
  body: Container(    
       decoration: BoxDecoration(
        gradient: new LinearGradient(
            colors: [Colors.white, Colors.grey],
            begin: Alignment.bottomLeft,
            end: Alignment.topRight
        )
    ),
 child:  ListView.builder(
    itemCount: data == null ? 0 : data.length,
    itemBuilder: (BuildContext context, int index){
     return new Card(
      child: Column( 
        mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        ListTile(
          leading: Icon(Icons.beenhere, color: Colors.red, size: 35.0,),
          title: new Text(data[index]["Title"],style: new TextStyle(fontSize: 20.0, color: Colors.grey) ),
          subtitle: new Text(data[index]["Content"],style: new TextStyle(fontSize: 15.0, color: Colors.grey)),
          trailing: new Text(data[index]["FirstName"],style: new TextStyle(fontSize: 15.0, color: Colors.grey)),
          isThreeLine: true,
        ),
               ButtonTheme.bar( // make buttons use the appropriate styles for cards
      child: ButtonBar(
        children: <Widget>[
           FlatButton(
            padding: EdgeInsets.all(10.0),
            child: Column( // Replace with a Row for horizontal icon + text
              children: <Widget>[
              Icon(Icons.thumb_up, color: Colors.grey[600]),
                Text(data[index]["UpVote"].toString(), style: new TextStyle(color: Colors.grey))
              ],
            ),



            onPressed: () {

               forumUpVote(widget.user.userId, widget.postID);

             },
          ),
           FlatButton(
            padding: EdgeInsets.all(10.0),
            child: Column( // Replace with a Row for horizontal icon + text
              children: <Widget>[
              Icon(Icons.question_answer, color: Colors.blue),
                Text("Answer", style: new TextStyle(color: Colors.grey))
              ],
            ),


            onPressed: () {

              Navigator.of(context).push(new MaterialPageRoute(builder: (BuildContext context) => new ForumAnswerQuestion( user: widget.user, postID: widget.postID, posttitle: data[index]["Title"], features: widget.features )));

             },
          ),
          FlatButton(
             child: Column( // Replace with a Row for horizontal icon + text
              children: <Widget>[
              Icon(Icons.info_outline, color: Colors.orangeAccent),
                Text(data[index]["AnswerCount"].toString(), style: new TextStyle(color: Colors.grey))
              ],
            ),


            onPressed: () {

                Navigator.of(context).push(new MaterialPageRoute(builder: (BuildContext context) => new ForumPostsDetail( user: widget.user, postID: widget.postID, posttitle: data[index]["Title"], content: data[index]["Content"], features: widget.features )));

             },
          ),

           FlatButton(
             child: Column( // Replace with a Row for horizontal icon + text
              children: <Widget>[
              Icon(Icons.flag, color: Colors.red),
                Text("Flag", style: new TextStyle(color: Colors.red))
              ],
            ),


            onPressed: () {

                Navigator.of(context).push(new MaterialPageRoute(builder: (BuildContext context) => new ForumPostsDetail( user: widget.user, postID: widget.postID, posttitle: data[index]["Title"], content: data[index]["Content"], features: widget.features )));

             },
          ),

        ],
      ),
    ),
        ]
        ),
     );
     },
  ) 
  )

  );
  }

}

我们有一个以Flutter编写的论坛和一个通过http调用网络api的upvote post函数。我们需要带有更新计数的图标来刷新，而不是整个屏幕。 flutter 如何完成？我们曾经通过网页中的AJAX实现此目的。

这是upvote图标的代码

 children: <Widget>[
              Icon(Icons.thumb_up, color: Colors.green),
                Text(data[index]["UpVote"].toString(), style: new TextStyle(color: Colors.grey))
              ],

HTTP调用代码

   Future forumUpVote(String userid, String postID) async {
   final response =
  await http.post('http://url/api/ForumUpvote',
  headers: {"Content-Type": "application/json", 
             'Accept': 'application/json',},
  body: json.encode({'userid' : userid , 'postID' : widget.postID}));

  if (response.statusCode == 204) {
// Call was successful
 Navigator.of(context).push(new MaterialPageRoute(builder: (BuildContext context) => new ForumPost(user: widget.user, postID: widget.postID, features: widget.features)));
}
}

响应成功后，会将它们发送回同一屏幕，这就是刷新整个屏幕的原因。所以我想我们需要setstate()或类似的东西。我不确定如何解决此问题。

Answer 1

您是否可以创建一个单独的有状态窗口小部件，该窗口小部件在当前窗口小部件中引用，该窗口小部件具有upvote按钮和upvote计数器？

然后，当按下它时，您只能在该子窗口小部件内调用setState()方法。这只会刷新该小部件，而不刷新整个页面。