Flutter：Row内组件间距不均，需实现均等布局间距

问题原因 #

你当前的代码中，子组件通过Expanded强制填充Row的可用空间，导致MainAxisAlignment.spaceEvenly的间距逻辑失效——Expanded会让组件拉伸，破坏了Row对剩余空间的均匀分配，最终造成组件间间距大于左右两侧的情况。

解决方案 #

步骤1：简化自定义组件，移除Expanded

原组件中的Expanded和外层仅包裹单个Container的Column都是多余的，直接返回固定尺寸的Container即可：

Widget _buildParkingAndNagarSection(String title, Color colorBackground) {
  return Container(
    padding: EdgeInsets.only(top: 20.h, left: 20.w),
    width: 153.5.w,
    height: 114.h,
    decoration: BoxDecoration(
      color: colorBackground,
      border: Border.all(
        color: const Color(0xFFF1F1F1),
        width: 1.h,
      ),
      borderRadius: BorderRadius.circular(10.r),
    ),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Image.asset(
          ic_bottom_home,
          width: 44.w,
          height: 33.75.h,
          fit: BoxFit.fill,
        ),
        SizedBox(height: 20.h),
        Text(
          title,
          style: TextStyle(
            fontFamily: "Poppins",
            fontSize: 14.sp,
            color: const Color(0xFF27303E),
          ),
          softWrap: true,
          overflow: TextOverflow.fade,
        ),
      ],
    ),
  );
}

步骤2：调整Row布局，实现均匀间距

有两种方式可以实现左右侧与组件间间距相等：

方式一：利用MainAxisAlignment.spaceEvenly（自动分配间距）

移除Expanded后，直接使用MainAxisAlignment.spaceEvenly，Row会自动将屏幕剩余空间平均分成3份，作为左、中、右的间距：

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    _buildParkingAndNagarSection(
      Localization.of(context).labelSaveParking,
      const Color(0xFFE7F8FF),
    ),
    _buildParkingAndNagarSection(
      Localization.of(context).labelNavigateNagar,
      const Color(0xFFFFE7EB),
    ),
  ],
);

方式二：手动控制间距（精确指定尺寸）

如果需要固定间距大小，可通过SizedBox实现：

Row(
  children: [
    SizedBox(width: 16.w), // 左侧间距
    _buildParkingAndNagarSection(
      Localization.of(context).labelSaveParking,
      const Color(0xFFE7F8FF),
    ),
    SizedBox(width: 16.w), // 组件间间距
    _buildParkingAndNagarSection(
      Localization.of(context).labelNavigateNagar,
      const Color(0xFFFFE7EB),
    ),
    SizedBox(width: 16.w), // 右侧间距
  ],
);

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