Flutter ListView向下滚动时条目被截断问题及解决方法

问题描述 #

应用中展示用户创建的listings列表页面，当列表条目数量不足以填满整个屏幕时，向下滚动会出现条目被截断消失的异常情况，而非正常的滚动效果。尝试过用Container/SizedBox包裹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();
        },
      );
}

解决方案 #

问题的核心原因是RefreshIndicator直接作为ListView的父组件。调整组件层级，将RefreshIndicator上移作为Column的父组件后，滚动截断的问题即可解决。

内容的提问来源于stack exchange，提问作者OBurnsy22