Flutter中Divider上下间距不均 求均分间距解决方案

问题根源 #

你的Row组件内部仅设置了top:25的padding，导致内容（图片/文本）在Row中靠上对齐：第一个Row的内容底部与Row底部齐平，第二个Row的内容顶部与Row顶部有25px间距，再加上Divider的默认上下均分间距，最终造成视觉上Divider与上下内容的间距明显不一致。

解决方案 #

方案一：让Row内容垂直居中（推荐）

修改createRow方法，移除仅顶部的padding，或设置对称的上下padding，让内容在Row中垂直居中，这样Divider的默认均分间距就能和内容形成一致的视觉距离：

Row createRow(BuildContext context, String imageUrl, String text) {
  const containerHeight = 256.0;

  return Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: <Widget>[
      Container(
        alignment: Alignment.centerLeft,
        height: containerHeight,
        padding: const EdgeInsets.only(left: 50), // 移除top padding，让图片垂直居中
        child: Image.network(imageUrl),
      ),
      Container(
        alignment: Alignment.centerRight,
        height: containerHeight,
        padding: const EdgeInsets.only(right: 50), // 移除top padding，让文本垂直居中
        child: Text(
          text,
          style: TextStyle(
            color: const Color(0xFFFFFCF9),
            fontWeight: FontWeight.bold,
            fontSize: DefaultTextStyle.of(context).style.apply(fontSizeFactor: 1.3).fontSize,
          ),
        ),
      ),
    ]
  );
}

如果需要保留上下内边距，可设置对称padding：

padding: const EdgeInsets.only(left: 50, top:25, bottom:25),

方案二：自定义分割线，精确控制间距

若不想修改Row布局，可放弃默认Divider，用Container+Padding手动实现分割线，完全控制上下间距：

Widget createDivider() {
  return const Padding(
    padding: EdgeInsets.symmetric(horizontal: 30), // 对应原Divider的indent/endIndent
    child: Column(
      children: [
        SizedBox(height: 12), // 自定义上方间距
        Container(height: 1, color: Color(0xFF131518)), // 分割线
        SizedBox(height: 12), // 自定义下方间距
      ],
    ),
  );
}

你可以根据视觉需求调整SizedBox的高度，确保上下间距完全一致。

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