iPad Pro调试Flutter应用遇RenderFlex溢出，用SingleChildScrollView后黑屏

问题原因 #

1. RenderFlex溢出：Row内部的Container使用Get.width - 100作为宽度，在iPad Pro这类大屏设备上，该宽度加上其他元素的宽度会超出屏幕可用空间，导致右侧溢出。
2. 空白屏幕：添加SingleChildScrollView并设置水平滚动后，滚动视图未被赋予明确的高度约束。水平滚动的SingleChildScrollView需要父级提供固定高度，否则会因高度坍塌而显示空白。

修复方案 #

为SingleChildScrollView添加明确的高度约束（比如使用SizedBox包裹），确保内容能正常渲染，同时保留水平滚动功能：

child: SizedBox(
  // 根据内容实际高度调整，这里设置为50适配现有内容
  height: 50,
  child: SingleChildScrollView(
    scrollDirection: Axis.horizontal,
    child: Row(
      children: [
        SvgPicture.asset(
          "assets/icons/ic_location.svg",
          height: 24,
        ),
        SizedBox(width: 5),
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Container(
                  width: Get.width / 4,
                  height: 12,
                  decoration: BoxDecoration(
                    color: color,
                    borderRadius: BorderRadius.circular(4),
                  ),
                ),
                Icon(
                  Icons.keyboard_arrow_down,
                  color: Colors.black,
                  size: 16,
                )
              ],
            ),
            SizedBox(height: 8),
            Container(
              width: Get.width - 100,
              height: 12,
              decoration: BoxDecoration(
                color: color,
                borderRadius: BorderRadius.circular(4),
              ),
            ),
            SizedBox(height: 8),
          ],
        ),
      ],
    ),
  ),
)

额外建议 #

• 如果希望高度自适应内容，可以使用IntrinsicHeight包裹Row，但注意IntrinsicHeight可能带来性能开销，适合简单布局：

child: SingleChildScrollView(
  scrollDirection: Axis.horizontal,
  child: IntrinsicHeight(
    child: Row(
      // 现有Row内容
    ),
  ),
)

• 避免直接使用Get.width设置子元素宽度，可考虑使用布局约束（如Expanded）来适配不同屏幕尺寸，减少溢出风险。

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