Flutter聊天界面ListView无法滚动到底部的问题，_scrollController.jumpTo(_scrollController.position.maxScrollExtent)无法

本文链接：https://blog.csdn.net/qq_33555319/article/details/134571922

问题描述

聊天界面，需要展示最新消息在最底部。消息列表过多时，使用_scrollController.jumpTo(_scrollController.position.maxScrollExtent)并不能滚动到最底部

原因分析：

_scrollController.position.maxScrollExtent计算的最大滚动范围不准确

解决方案：

listview有一个 reverse属性，设置reverse为ture，可以把内容倒过来显示，倒着显示，这样就可以使用 _scrollController.jumpTo(0.0); 来实现滚动到底部视图。

ListView.builder(
        controller: scroller,
         // 关键代码 reverse: true,
        reverse: true,
        // 关键代码 shrinkWrap: true,
        shrinkWrap: true,
        itemBuilder: (context, index) {
          var item = logicDet.dataSource[index];
          if (chatModel.runtimeType == ChatRequestModel)
            return renderRightItem(item);
          else
            return renderLeftItem(item);
        },
        itemCount:logicDet.dataSource.length,
      )

可能导致另一个问题：

当聊天数据只有一两条时，不足撑满一个页面时，顶部可能会有空白现象
如果有这种情况，主要是因为布局的原因

解决方案：

在ListView的外成嵌套一个布局，让Expanded拉伸该布局，然后让该布局设置布局内子widget的定位规则丛上往下

Expanded(
        child: Align( 
      // 关键代码 alignment: Alignment.topCenter,
      alignment: Alignment.topCenter,
      child: ListView.builder(
        controller: scroller,
        // 关键代码 reverse: true,
        reverse: true,
        // 关键代码 shrinkWrap: true,
        shrinkWrap: true,
        itemBuilder: (context, index) {
          var item = logicDet.dataSource[index];
          if (chatModel.runtimeType == ChatRequestModel)
            return renderRightItem(item);
          else
            return renderLeftItem(item);
        },
        itemCount:logicDet.dataSource.length,
      ),
    ))