如何消除Flutter中Divider与ListView Builder间的空白区域

Divider下方设置了ListView Builder，但二者之间出现大片空白区域。尝试添加内边距无法使ListView Builder靠近Divider，调整Divider的height属性也无法拉近二者距离，请问有什么方法能让Divider与ListView Builder更贴近？

代码示例 #

Widget myWidgetWeek() {
    final String formattedDate = DateFormat.yMMMMd().format(_selectedDate);
    return Column(
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            IconButton(
              onPressed: _decrementDate,
              icon: Icon(Icons.arrow_left, size: 60),
            ),
            Container(
              padding: EdgeInsets.only(left: 22,top: 20),
              height: MediaQuery.of(context).size.height*5/77,
              child: Center(
                child: Text(
                  formattedDate,
                  style: TextStyle(fontSize: 20.0),
                ),
              ),
            ),
            IconButton(
              onPressed: _incrementDate,
              icon: Icon(Icons.arrow_right, size: 60),
            ),
          ],
        ),
        SizedBox(
          width: MediaQuery.of(context).size.width * 34/40,
          height: MediaQuery.of(context).size.height * 12/50,
          child: StepBarMonthlyChart(),
        ),
        if (_showFirst)
          Container(
            width: MediaQuery.of(context).size.width*5/5.7,
            padding: EdgeInsets.only(top: 10.0,left: 10),
            child: Text(
              'Steps are a useful measure of how much you\'re moving around, and can help you'
                  'spot changes in your activity levels',
              style: TextStyle(
              fontFamily: 'Montserrat',
              fontSize: 14,
              color: Colors.black,
              fontWeight: FontWeight.w400),
              ),
            ),
          if (_showFirst)
          Divider(
            height: MediaQuery.of(context).size.height * 3.5/50,
            color: Colors.grey,
            thickness: 2,
          ),
          if (_showFirst)
          Expanded(
            child: ListView.builder(
              shrinkWrap: true,
              itemCount: activity.length,
              itemBuilder: (BuildContext context, int index) {
                return ListTile(
                  title: Text(activity[index]['day']),
                  subtitle: Text(activity[index]['steps']),
                );
              },
            ),
          ),
      ],
    );
  }

解决方案 #

1. 修正Divider的height属性 #

Divider的height是组件总高度（包含上下留白），thickness才是分割线本身的厚度。你设置的超大height值会让Divider上下产生大量留白，直接将height设为与thickness一致即可消除额外空间：

Divider(
  thickness: 2,
  color: Colors.grey,
  height: 2, // 让组件高度等于分割线厚度，消除上下留白
),

2. 调整ListView的配置 #

• 移除shrinkWrap: true：你已经用Expanded包裹ListView，shrinkWrap会让ListView收缩到内容高度，与Expanded填充剩余空间的作用冲突，导致布局计算异常产生空白。
• 清除ListView默认内边距：ListView默认自带上下内边距，通过padding: EdgeInsets.zero移除：

Expanded(
  child: ListView.builder(
    padding: EdgeInsets.zero,
    itemCount: activity.length,
    itemBuilder: (BuildContext context, int index) {
      return ListTile(
        title: Text(activity[index]['day']),
        subtitle: Text(activity[index]['steps']),
      );
    },
  ),
),

3. 优化布局结构（可选） #

将_showFirst控制的组件统一包裹在一个Column中，避免多个独立if块可能产生的隐性间距，让布局逻辑更紧凑：

if (_showFirst)
  Column(
    children: [
      Container(
        width: MediaQuery.of(context).size.width*5/5.7,
        padding: EdgeInsets.only(top: 10.0,left: 10),
        child: Text(
          '步数是衡量日常活动量的有效指标，能帮你发现活动水平的变化',
          style: TextStyle(
            fontFamily: 'Montserrat',
            fontSize: 14,
            color: Colors.black,
            fontWeight: FontWeight.w400),
        ),
      ),
      Divider(
        thickness: 2,
        color: Colors.grey,
        height: 2,
      ),
      Expanded(
        child: ListView.builder(
          padding: EdgeInsets.zero,
          itemCount: activity.length,
          itemBuilder: (BuildContext context, int index) {
            return ListTile(
              title: Text(activity[index]['day']),
              subtitle: Text(activity[index]['steps']),
            );
          },
        ),
      ),
    ],
  ),

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