SwiftUI中RoundedRectangle为何忽略安全区域？

问题根源 #

• Divider 是SwiftUI专为分隔场景打造的组件，内部已经封装了安全区域适配逻辑，默认会自动避开顶部、底部的安全区域。
• RoundedRectangle 属于基础形状视图，它的核心逻辑是填充给定的空间范围，默认不会主动识别安全区域。所以当你把它设为width:1当作竖分隔线时，它会从父视图的最边缘（包括安全区域覆盖的部分）开始绘制，自然就会超出安全区域范围。

解决方法 #

要让RoundedRectangle遵守安全区域，有几种实用的处理方式：

1. 手动添加安全区域方向的padding #

直接给RoundedRectangle添加上下方向的padding，值对应安全区域的Insets：

RoundedRectangle(cornerRadius: 0)
    .frame(width: 1)
    .padding(.top, UIApplication.shared.windows.first?.safeAreaInsets.top ?? 0)
    .padding(.bottom, UIApplication.shared.windows.first?.safeAreaInsets.bottom ?? 0)

2. 反向控制安全区域忽略规则 #

如果你的父视图设置了ignoresSafeArea()，可以给RoundedRectangle添加反向约束，强制它遵守安全区域：

VStack {
    // 其他视图内容
    RoundedRectangle(cornerRadius: 0)
        .frame(width: 1)
        .ignoresSafeArea(.all, edges: []) // 空数组表示不忽略任何方向的安全区域
}
.ignoresSafeArea()

3. 用GeometryReader动态适配 #

通过GeometryReader读取当前视图的安全区域尺寸，动态调整RoundedRectangle的高度和位置：

GeometryReader { geo in
    RoundedRectangle(cornerRadius: 0)
        .frame(width: 1, height: geo.size.height - geo.safeAreaInsets.top - geo.safeAreaInsets.bottom)
        .offset(y: geo.safeAreaInsets.top)
}

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