Flutter ListView在向下滚动时条目被截断。

huangapple go评论61阅读模式
英文:

Flutter ListView entries cut off when scrolled down

问题

我的应用程序中的一个屏幕显示用户创建的“列表”。如果列表数量不足以填满整个屏幕,并且用户向下滚动,滚动的列表项将被切断而不是向下滚动。

用户向下滚动列表项时,我希望它不会消失。我尝试将ListView.builder包装在容器/尺寸框中以定义其大小,但这种行为仍然存在。我还尝试在列表中插入一些空白项,这些项不会响应用户点击,但这似乎是一种低效的解决方案。以下是我的代码:

return Scaffold(
    key: listing_home_scaffold_key,
    resizeToAvoidBottomInset: false,
    backgroundColor: BODY_BACKGROUND_COLOR,
    appBar: returnAppBarForHomePages(context, "Listings", widget.local_user, updateUserState,
        widget.local_user.usingDefaultImage, widget.local_user.getProfilePicURL, listing_home_scaffold_key),
    drawer: settingsDrawer(widget.local_user),
    body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
            returnScrollableListView()
        ]),
);

Widget returnScrollableListView() {
    return RefreshIndicator(
        child: ListView.builder(
            physics: const BouncingScrollPhysics(parent: AlwaysScrollableScrollPhysics()),
            itemCount: user_listings.length,
            shrinkWrap: true,
            padding: const EdgeInsets.only(top: 0),
            itemBuilder: (context, index) {
                return UserListing(listing: user_listings[index]);
            }),
        onRefresh: () async {
            var cancel_loading_indicator = showLoadingIndicatorAllowClick();
            await reQueryData();
            cancel_loading_indicator();
        },
    );
}

示例滚动前

示例滚动后

编辑:将刷新指示器直接作为ListView的父级引起了这个问题。将其移动到上一级,使其成为Column的父级,可以解决这个问题。

英文:

A screen in my app displays a list of "listings" the user has made. In the event there is not enough listings to fill the whole screen, and the user scrolls down, the listing they are scrolling will get cut off instead of being scrolled down.

example before scrolling

example after scrolling

As the user scrolls the list entry downwards I would like it not to disappear. I've tried wrapping the listview.builder in containers / sized boxes to define their size, although this behavior persists. I thought I could also put in some blank entries into the list that wouldn't respond to user clicks but that seems like an inefficient solution. Here is my code:

    return Scaffold(
        key: listing_home_scaffold_key,
        resizeToAvoidBottomInset: false,
        backgroundColor: BODY_BACKGROUND_COLOR,
        appBar: returnAppBarForHomePages(context, &quot;Listings&quot;, widget.local_user, updateUserState,
            widget.local_user.usingDefaultImage, widget.local_user.getProfilePicURL, listing_home_scaffold_key),
        drawer: settingsDrawer(widget.local_user),
        body: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: &lt;Widget&gt;[
              returnScrollableListView()
            ]),
      );

  Widget returnScrollableListView() {
    return RefreshIndicator(
          child: ListView.builder(
              physics: const BouncingScrollPhysics(parent: AlwaysScrollableScrollPhysics()),
              itemCount: user_listings.length,
              shrinkWrap: true,
              padding: const EdgeInsets.only(top: 0),
              itemBuilder: (context, index) {
                return UserListing(listing: user_listings[index]);
              }),
          onRefresh: () async {
            var cancel_loading_indicator = showLoadingIndicatorAllowClick();
            await reQueryData();
            cancel_loading_indicator();
          },
        );
  }

Edit: Having the refresh indicator be the direct parent to the listview caused this problem. Moving it up a level so it's instead the parent of the Column fixed this.

答案1

得分: 1

将刷新指示器直接设为列表视图的父级引起了这个问题。将其移动到上一级,以便它成为列的父级,问题得到解决。

英文:

Having the refresh indicator be the direct parent to the listview caused this problem. Moving it up a level so it's instead the parent of the Column fixed this.

huangapple
  • 本文由 发表于 2023年2月8日 08:54:40
  • 转载请务必保留本文链接:https://go.coder-hub.com/75380429.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定