ListView与BottomNavigationBar间空白问题及Flexible/Expanded使用疑问

看起来你遇到的问题是用Flexible时底部出现空白，换成Expanded又担心没法控制两个组件的高度比例——其实完全不用担心，Expanded同样支持flex属性来设置比例，而且它能强制填充可用空间，正好解决空白问题。下面是具体的调整方案：

核心调整思路 #

• 替换Flexible为Expanded：Flexible只会尽可能占用空间，但不会强制填满，这可能导致底部留下空白；而Expanded会强制子组件填充分配到的空间，同时保留flex比例设置，完美满足你的1:2高度需求。
• 确保Column充满父容器：让Column的父容器（比如外层的Container）充满可用高度，同时设置Column的mainAxisSize: MainAxisSize.max，确保它能占满所有可用空间。
• 移除ListView的默认padding：默认情况下，ListView会添加底部padding来避开系统导航栏，但如果你的BottomNavigationBar已经放在Scaffold的bottomNavigationBar属性里，这个padding就多余了，会导致空白。

修改后的代码示例 #

Container(
  height: double.infinity, // 让Container充满父容器的高度
  child: Column(
    mainAxisSize: MainAxisSize.max, // 强制Column占满可用空间
    children: <Widget>[
      Expanded(
        flex: 1,
        child: _adher(),
      ),
      Expanded(
        flex: 2,
        child: DrugsListView(
          // 假设DrugsListView内部是ListView，设置padding为0
          child: ListView(
            padding: EdgeInsets.zero,
            // 你的ListView其他配置
          ),
        ),
      ),
    ],
  ),
)

额外检查点 #

如果调整后还有空白，你可以排查这两个地方：

• 检查_adher()组件内部是否有额外的margin或padding，尤其是底部边距，有的话移除即可。
• 确认DrugsListView本身没有设置不必要的底部边距，比如外层的Padding或Container的margin属性。

这样调整后，不仅能消除BottomNavigationBar和ListView之间的空白，还能严格保持_adher()与DrugsListView的1:2高度比例。

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