在 SwiftUI 中显示隐藏文本框（如 macOS 任务应用程序）

Question

I am trying to replicate the Add New Task feature in a macOS app. Exactly as it is implemented in the macOS official Tasks app. If I tap on the List then I can show the "Add Task Row". The row consists of a TextBox and few buttons.

The problem is that when I tap on the TextBox the row hides itself since the gesture of List is invoked. How can I make it work exactly like macOS Tasks app.

struct ContentView: View {
    
    @State private var editing: Bool = false
    @State private var taskName: String = ""
    
    var body: some View {
        List {
            ForEach(1...5, id: \.self) { index in
                Text("\(index)")
            }
            
            if editing {
                
                VStack(alignment: .leading) {
                    TextField("Enter task", text: $taskName)
                    HStack {
                        Button("Add Date") {
                           
                        }.buttonStyle(.bordered)
                        Button("Add Location") {
                           
                        }.buttonStyle(.bordered)
                    }
                }.onTapGesture {
                    
                }
            }
            
        }.listStyle(.plain)
            .gesture(TapGesture().onEnded({ _ in
                withAnimation {
                    editing.toggle()
                }
            }), including: editing ? .subviews  : .gesture)
           
    }
}