如何移除macOS上.grouped样式Form中指定视图的边框？

针对你遇到的问题，有几种实用的解决方案，可根据系统版本需求选择：

方法一：使用listSectionBackground（macOS 13+） #

在需要移除边框的Section上添加.listSectionBackground(.clear)修饰符，直接清除该Section的默认背景边框，代码修改如下：

Form {
    Section {
        VStack {
            Image(systemName: "person.crop.circle")
                .resizable()
                .frame(width: 100, height: 100)
            Text("John Smith")
                .font(.title)
        }
        .frame(maxWidth: .infinity)
    }
    .listSectionBackground(Color.clear) // 移除当前Section的边框背景
    
    Section {
        Text("Setting 1")
        Text("Setting 2")
    }
}
.formStyle(.grouped)

这个方法简洁直接，是官方推荐方式，但仅支持macOS Ventura（13.0）及以上版本。

方法二：将内容移出Form（兼容旧版本） #

如果需要兼容macOS 12及更早版本，可把不需要边框的账户信息放在Form外部，通过VStack组合内容，保持视觉连贯：

VStack(spacing: 0) {
    // 账户信息区域，脱离Form无默认边框
    VStack {
        Image(systemName: "person.crop.circle")
            .resizable()
            .frame(width: 100, height: 100)
        Text("John Smith")
            .font(.title)
    }
    .frame(maxWidth: .infinity)
    .padding() // 调整内边距匹配Form的间距
    
    // 带边框的设置表单
    Form {
        Section {
            Text("Setting 1")
            Text("Setting 2")
        }
    }
    .formStyle(.grouped)
}

注意：这种方式下，账户信息不会随Form内容滚动，若Form内容较长需调整布局逻辑。

方法三：利用Form Header（macOS 13+） #

把账户信息放在Form的头部区域，Form Header默认不带Section边框，适合新版本系统：

Form {
    Section {
        Text("Setting 1")
        Text("Setting 2")
    }
}
.formStyle(.grouped)
.formHeader {
    VStack {
        Image(systemName: "person.crop.circle")
            .resizable()
            .frame(width: 100, height: 100)
        Text("John Smith")
            .font(.title)
    }
    .frame(maxWidth: .infinity)
    .padding()
}

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