如何在macOS的.grouped样式Form中将整行设为可点击按钮？

你在macOS上使用.grouped样式的Form编辑项目列表时，遇到末尾Button样式不符合预期的问题——希望按钮整行可点击（类似iOS中List里的Button效果），但用NavigationLink只能导航，无法执行自定义添加动作。

以下是两种可行的解决方法：

方法一：直接改造Button实现整行点击 #

给Button设置.plain按钮样式，并让内部内容撑满整行，这样点击行内任意位置都会触发添加动作，样式也贴近列表行效果：

struct ContentView: View {
    @State private var people = [
        Person(name: "Tom"),
        Person(name: "Dick"),
        Person(name: "Harry"),
    ]
    
    var body: some View {
        NavigationStack {
            Form {
                Section {
                    ForEach($people) { $person in
                        TextField("Name", text: $person.name)
                    }
                    // 修改后的Button
                    Button(action: {
                        people.append(Person(name: ""))
                    }) {
                        HStack {
                            Text("New Person")
                            Spacer() // 让文本左对齐，撑满整行宽度
                        }
                        .frame(maxWidth: .infinity, alignment: .leading)
                    }
                    .buttonStyle(.plain)
                }
            }
            .formStyle(.grouped)
        }
    }
}

struct Person: Identifiable {
    let id = UUID()
    var name: String
}

方法二：自定义ButtonStyle精确匹配样式 #

如果需要更贴近原生列表行的点击高亮效果，可以自定义一个ButtonStyle，精确控制按钮的布局和交互状态：

// 自定义按钮样式
struct ListRowButtonStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .frame(maxWidth: .infinity, alignment: .leading)
            .padding(.vertical, 8)
            .padding(.horizontal, 16)
            .background(configuration.isPressed ? Color(.controlHighlightColor) : Color.clear)
    }
}

struct ContentView: View {
    @State private var people = [
        Person(name: "Tom"),
        Person(name: "Dick"),
        Person(name: "Harry"),
    ]
    
    var body: some View {
        NavigationStack {
            Form {
                Section {
                    ForEach($people) { $person in
                        TextField("Name", text: $person.name)
                    }
                    Button(action: {
                        people.append(Person(name: ""))
                    }) {
                        Text("New Person")
                    }
                    .buttonStyle(ListRowButtonStyle())
                }
            }
            .formStyle(.grouped)
        }
    }
}

struct Person: Identifiable {
    let id = UUID()
    var name: String
}

这两种方法都能实现整行可点击的按钮，同时执行你需要的添加新人员的自定义动作。

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