SwiftUI Form与Section项高度不一致及圆角去除问题

1. 让Section内所有项保持相同垂直高度 #

Form本质是List的变种，Section默认会给同组内的第一个、最后一个元素设置差异化的上下内边距，这就是导致视觉高度不一致的原因。直接加.frame(height:)无效，是因为List的行布局逻辑会优先覆盖自定义高度设置。

解决方法：

• 给每个SettingsItem统一设置固定内边距和最小高度，强制所有行的布局规则一致：

struct SettingsItem: View {
    let showDivider: Bool
    var text: String

    var body: some View {
        VStack {
            HStack {
                Text(text)
                    .font(.system(size: 18, weight: .regular))
                    .foregroundColor(.gray)
                Spacer()
                Image(systemName: "chevron.right")
                    .font(.system(size: 16, weight: .bold))
                    .foregroundColor(.gray)
            }
            if showDivider {
                Divider()
            }
        }
        .frame(minHeight: 60) // 强制最小高度，确保内容不足时也撑满高度
        .listRowInsets(EdgeInsets(top: 16, leading: 16, bottom: 16, trailing: 16)) // 统一所有行的内外边距
    }
}

调整minHeight和EdgeInsets的数值可以匹配你的视觉需求，这样所有行的高度就会完全一致。

2. 移除Form圆角并让项扩展到屏幕边缘 #

Form默认的分组样式自带圆角和内边距，要实现边缘锐利+全屏宽度的效果，需要修改List样式并调整行内边距：

步骤1：修改Form的List样式 #

给Form添加.listStyle(.plain)，去掉默认的分组圆角和内边距：

Form {
    // ... 你的Section内容
}
.listStyle(.plain)

步骤2：调整行内边距实现全屏宽度 #

给SettingsItem的.listRowInsets设置负的左右内边距，让内容撑到屏幕边缘：

// 在SettingsItem的VStack后添加
.listRowInsets(EdgeInsets(top: 16, leading: -20, bottom: 16, trailing: -20))

步骤3：清除Section的默认背景圆角 #

如果还有残留的圆角，给每个Section添加自定义背景，覆盖默认样式：

Section(header: Text("ACCOUNT SETTINGS")
    .foregroundColor(.gray)) {
        // ... 你的SettingsItem
}
.listRowBackground(Color.white) // 用纯色背景替代默认带圆角的背景

最终修改后的完整Settings视图：

struct Settings: View {
    var body: some View {
        NavigationView {
            Form {
                Section(header: Text("ACCOUNT SETTINGS")
                    .foregroundColor(.gray)) {
                        SettingsItem(showDivider: true, text: "Account")
                        SettingsItem(showDivider: true, text: "Notifications")
                        SettingsItem(showDivider: false, text: "Preferences")
                    }
                    .listRowBackground(Color.white)
                Section(header: Text("SECURITY")
                    .foregroundColor(.gray)) {
                        SettingsItem(showDivider: false, text: "Password")
                    }
                    .listRowBackground(Color.white)
                Section(header: Text("ABOUT")
                    .foregroundColor(.gray)) {
                        SettingsItem(showDivider: true, text: "FAQ")
                        SettingsItem(showDivider: true, text: "About")
                        SettingsItem(showDivider: false, text: "Contact")
                    }
                    .listRowBackground(Color.white)
            }
            .listStyle(.plain)
        }
    }
}

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