Flutter / ListView 和 StreamBuilder：过度滚动时显示错误

Question

当我过度滚动我的 ListView 时出现显示问题（有点“振动”，见下文）：

overscroll display issue

我没有收到任何错误消息，我也不知道这个问题是从哪里来的。

你知道如何解决这个问题吗？我应该找到避免过度滚动的方法吗？

谢谢！

这是我的代码：

Widget build(BuildContext context) {
TextEditingController controller = TextEditingController();
return Scaffold(
  backgroundColor: base,
  body: SafeArea(
      bottom: false,
      child: Column(
        children: <Widget>[
          Expanded(child: InkWell(child: DetailPage(post, user, scrollController), onTap: (){
            FocusScope.of(context).requestFocus(FocusNode());
          })),
          Container(width: MediaQuery.of(context).size.width, height: 1.0, color: baseAccent,),
          Container(width: MediaQuery.of(context).size.width, height: 75.0, color: white,
            padding: EdgeInsets.only(left: 10.0, right: 10.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Container(width: MediaQuery.of(context).size.width - 100,
                  child: MyTextField(controller: controller, hint: "Écrivez un commentaire"),
                ),
                IconButton(icon: SendIcon, onPressed: (){
                  FocusScope.of(context).requestFocus(FocusNode());
                  if(controller.text != null && controller.text != ""){
                    FireHelper().addComment(post, controller.text, post.userId);
                    scrollController.animateTo(scrollController.position.maxScrollExtent, duration: Duration(milliseconds: 300), curve: Curves.ease);
                  }
                })
              ],
            ),
          )
        ],
      )
  ),
);

}

这是 DetailPage 代码（问题一定出自此处）：

Widget build(BuildContext context) {
            if(currentPost!=null){
              return ListView.builder(
                  controller: widget.scrollController,
                  itemCount: currentPost.comments.length + 1,
                  itemBuilder: (BuildContext ctx, int index) {
                    if (index == 0) {
                      if(widget.post.type=="Movie"){
                        return MovieTile(post: currentPost, user: widget.user, detail: true);
                      } else {
                        if(widget.post.type=="Serie"){
                          return SerieTile(post: currentPost, user: widget.user, detail: true);
                        } else {
                          if(widget.post.type=="Book"){
                            return BookTile(post: currentPost, user: widget.user, detail: true);
                          } else {
                            return PostTile(post: currentPost, user: widget.user, detail: true);
                          }
                        }
                      }
                    }
                    else {
                      Comment comment = Comment(currentPost.comments[index - 1]);
                      if(me.uid == comment.userId){
                        streamUsers(comment.userId);
                        return StreamBuilder(
                            stream: FireHelper().fire_user.doc(comment.userId).snapshots(),
                            builder: (BuildContext ctx, AsyncSnapshot<DocumentSnapshot> snap){
                              if(snap.hasData) {
                                user = myUser(snap.data);
                                return OnSlide(
                                    items: <ActionItems>[
                                      new ActionItems(
                                          icon: IconButton(
                                              icon: Icon(Icons.delete),
                                              onPressed: () {},
                                              color: Colors.red),
                                          onPress: () =>
                                          ({
                                            FireHelper().deleteComment(currentPost.ref, user.uid, comment.text, comment.date),
                                            comments.remove(comment),
                                            print("comment deleted."),
                                          }),
                                          backgroudColor: Colors
                                              .transparent)
                                    ],
                                    child: CommentTile(comment, user)
                                );
                              } else {
                                return LoadingCenter();
                              }
                            });
                      }
                      else {
                        return StreamBuilder(
                            stream: FireHelper().fire_user.doc(comment.userId).snapshots(),
                            builder: (BuildContext ctx, AsyncSnapshot<DocumentSnapshot> snap){
                              if(snap.hasData) {
                                user = myUser(snap.data);
                                return CommentTile(comment, user);
                              } else {
                                return LoadingCenter();
                              }
                            }
                        );
                      }
                    }
                  });
            } else {
              return LoadingCenter();
            };

}

Answer 1

你可以试试玩卷轴物理。在您的 ListView 下添加：

physics: ClampingScrollPhysics()

有很多卷轴物理选项： Flutter ListView and ScrollPhysics: A Detailed Look

Flutter / ListView 和 StreamBuilder：过度滚动时显示错误

Flutter / ListView and StreamBuilder : bug display when overscrolled

listview

scroll

flutter