SwiftUI中添加不影响父视图尺寸的Divider及侧边栏左对齐问题

问题原因 #

系统默认的Divider会尽可能占用可用水平空间，在HSplitView中，这种特性会导致包含Divider的侧边栏被优先拉伸至最大宽度，而非保持内容本身的固有宽度。

解决方案1：固定侧边栏水平尺寸，让Divider填充现有宽度 #

修改SidebarView，通过fixedSize(horizontal: true, vertical: false)强制侧边栏保持内容的固有水平宽度，同时让Divider填充该宽度：

struct SidebarView: View {
    var body: some View {
        VStack(alignment: .leading) {
            Text("Things")
            
            Divider()
                .frame(maxWidth: .infinity) // 让Divider填充VStack的当前宽度

            Spacer()

            Button("New Thing") {
                print("New Thing")
            }
        }
        .padding()
        .fixedSize(horizontal: true, vertical: false) // 固定水平方向的固有尺寸，阻止侧边栏拉伸
    }
}

解决方案2：用自定义分割线替代系统Divider #

系统Divider的拉伸特性是默认行为，我们可以用自定义水平线条代替它，更灵活控制尺寸：

struct SidebarView: View {
    var body: some View {
        VStack(alignment: .leading) {
            Text("Things")
            
            // 自定义分割线，高度1，填充当前VStack宽度
            Color.gray
                .frame(height: 1)
                .frame(maxWidth: .infinity)

            Spacer()

            Button("New Thing") {
                print("New Thing")
            }
        }
        .padding()
    }
}

额外说明 #

如果需要侧边栏支持手动调整宽度（同时保持内容左对齐），可以给SidebarView设置宽度范围约束，结合上述方案即可：

// 在TestView中修改
SidebarView()
    .frame(minWidth: 200, maxWidth: 300) // 限制侧边栏的宽度范围

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