SwiftUI布局求助：TextField嵌套Button触发及样式异常问题

问题原因 #

1. 点击红框外触发Button：List行的默认交互与Button的点击事件发生传递冲突，默认Button样式会让点击区域超出视觉范围，且List行的点击会被Button响应。
2. 点击Button时TextField变灰：这是List行被选中后的默认高亮效果，点击Button时触发了整个行的选中状态。

修复代码 #

List {
    Section(header: Text("ADD WORD")) {
        HStack(spacing: 8) {
            TextField("input word", text: $dictionaryVM.inputText)
                .autocapitalization(.none)
                .disableAutocorrection(true)
            
            Button(action: {
                showDetailView = true
            }, label: {
                Image(systemName:"plus")
            })
            .frame(width: 40, height: 40)
            .background(Color.blue.opacity(0.1))
            .cornerRadius(10)
            .buttonStyle(PlainButtonStyle())
        }
        .onTapGesture {}
        .listRowSelection(.none)
    }
}

关键修复点 #

• .buttonStyle(PlainButtonStyle())：移除Button的默认样式，限制其点击区域仅在视觉范围内，同时避免与List行的点击事件冲突。
• .onTapGesture {}：消费HStack的点击事件，防止点击TextField区域时触发List行的默认交互。
• .listRowSelection(.none)：直接禁用List行的选中高亮效果，彻底解决TextField变灰的问题（需iOS 16及以上版本）。
• 替换负padding：用HStack(spacing: 8)替代.padding(.trailing, -10)，避免Button点击区域因负padding超出布局范围。

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