Flutter如何让组件扩展至父组件minHeight而非撑满maxHeight

问题原因 #

出现这个现象是Flutter的布局约束逻辑导致的：

• 你当前给Column设置了mainAxisSize: MainAxisSize.min，Column的高度只会自适应包裹子元素的固有高度，完全不会响应父组件传递的minHeight约束，因此底部指示条永远紧跟在蓝色列表下方，哪怕父组件最小高度大于内容总高度，底部留空时指示条也不会沉底。
• 直接添加Spacer/Expanded会强制Column占用父组件提供的全部可用空闲空间，直接触发modal bottom sheet扩展到maxHeight，不符合预期。
• 给底部指示条加Align无效，是因为Column本身高度是包裹内容的，Align的对齐范围就是内容总高度，没有多余空间可以调整位置。

解决方案 #

只需要做3处小改动即可实现你要的效果，不需要手动计算高度：

1. 在最外层红色Container外包裹IntrinsicHeight组件，这个组件会限制子组件高度为内容固有高度，避免弹性组件无限制撑满父组件最大空间。
2. 将Column的mainAxisSize从MainAxisSize.min改为MainAxisSize.max，让弹性组件可以正常生效。
3. 给蓝色的聊天列表容器外层包裹Flexible组件，让列表在内容过多时可以自动滚动，不会出现高度溢出；在蓝色列表和底部指示条之间添加Spacer组件，自动填充内容高度和父组件minHeight之间的差值。

修改后的完整代码如下：

IntrinsicHeight(
  child: Container(
    color: Colors.red,
    child: Column(
      mainAxisSize: MainAxisSize.max,
      children: [
        Padding(
          padding: ScrPaddings.top8Padding,
          child: HorizontalBarIndicator(
            width: ScrPaddings(context).screenWidthRelativeTo390(32.0),
          ),
        ),
        Flexible(
          child: Container(
            color: Colors.blue,
            child: ChatListView(
              conversation: state.conversation,
              showPendingAnimationBubble: true,
            ),
          ),
        ),
        const Spacer(),
        Padding(
          padding: ScrPaddings.bottom8Padding,
          child: HorizontalBarIndicator(
            width: ScrPaddings(context).screenWidthRelativeTo390(134.0),
          ),
        ),
      ],
    ),
  ),
)

实现效果 #

• 当聊天内容较少，内容总高度小于父组件minHeight时：Spacer自动填充剩余空间，将底部指示条顶到红色容器最底部，容器高度保持为minHeight，不会撑到maxHeight。
• 当聊天内容总高度在minHeight和maxHeight之间时：Spacer高度自动变为0，底部指示条紧跟在蓝色列表下方，容器高度自适应为内容总高度。
• 当聊天内容总高度超过maxHeight时：Flexible包裹的聊天列表自动在可用空间内滚动，容器高度保持为maxHeight，底部指示条固定在容器底部，不会出现布局溢出。

如果你的ChatListView内部是ListView/GridView这类可滚动组件，且没有设置shrinkWrap: true也没有影响，Flexible会自动给它传递宽松的高度约束，列表可以正常滚动。如果布局报错，给可滚动组件加上shrinkWrap: true即可。

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