Flutter 聊天界面使用ListView的reverse:true，导致条目太少的时候会从下往上显示，导致顶部大片空白

最新推荐文章于 2024-03-30 17:26:44 发布

攻城狮xue

最新推荐文章于 2024-03-30 17:26:44 发布

阅读量4.4k

点赞数 10

分类专栏： Flutter 文章标签： flutter android

本文链接：https://blog.youkuaiyun.com/qq_35364808/article/details/111618498

版权

Flutter 专栏收录该内容

10 篇文章

订阅专栏

当ListView在Column布局中且条目不足时，由于Expanded的拉伸，可能导致显示异常。解决方法是在ListView外层使用Align，并设置alignment: Alignment.topCenter，配合shrinkWrap: true，使ListView保持顶部对齐，从而避免布局问题。关键代码示例：Expanded > Align > ListView.builder。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这个问题其实很简单，但是看到网上都没有正确的解决方案，所以就献丑了

https://blog.youkuaiyun.com/qq_35364808/article/details/111618498

这个问题主要是因为布局的原因，正常情况下时候ListView的reverse:true，就算条目太少也是从上往下显示的。出现这个原因主要是因为，聊天窗口大家都是使用Column嵌套ListView，ListView负责消息列表，然后还要有输入框之类的，所以不能让ListView占满怎么屏幕所以需要使用Expanded包裹ListView，他会把ListView在条目过少的时候照样将他的宽度拉到可适应的最大，这个是导致布局异常的原因。想要解决就是让Expanded不要拉伸ListView，在ListView的外成嵌套一个布局，让Expanded拉伸该布局，然后让该布局设置布局内子widget的定位规则丛上往下，这样就可以了。

下面贴出关键代码

Expanded(
        child: Align( // 此处为关键代码
      alignment: Alignment.topCenter,
      child: ListView.builder(
          reverse: true,
          shrinkWrap: true,
          itemCount: widget.model.dataList.length,
          itemBuilder: (context, index) {
            return ChatMessageWidget();
          }),
    ))