SwiftUI：如何通过列表项点击修改@State属性以动态显隐视图

这个问题很常见，其实只需要给你的DateView列表项加上点击交互，就能切换showingDateSelector的状态啦，我给你两种实用的实现方式参考：

方式一：直接给列表项添加点击手势（最快实现） #

不需要修改DateView的原有代码，直接在List里给它绑定点击事件，触发状态切换：

struct EditTransactionView : View {
    @State var date = Date()
    @State private var showingDateSelector = false
    
    var body: some View {
        NavigationView {
            List {
                // 给DateView添加点击手势，切换选择器显隐状态
                DateView(date: $date)
                    .onTapGesture {
                        showingDateSelector.toggle()
                    }
                
                if showingDateSelector {
                    DatePicker(
                        "选择日期", // 加上标签文本避免布局警告，可自定义内容
                        selection: $date,
                        maximumDate: Date(),
                        displayedComponents: .date
                    )
                }
            }
            .navigationTitle("编辑交易") // 可选：添加导航栏标题让界面更完整
        }
    }
}

每次点击DateView时，toggle()方法会自动切换showingDateSelector的布尔值，从而控制下方DatePicker的显示和隐藏。

方式二：给DateView添加点击回调（更灵活的封装方案） #

如果DateView是你自定义的组件，建议给它加一个可选的点击回调参数，让组件的复用性更强：
首先修改DateView的定义：

struct DateView: View {
    @Binding var date: Date
    var onTap: (() -> Void)? // 可选的点击回调闭包
    
    var body: some View {
        // 这里是你原本的DateView内容，比如显示格式化后的日期
        Text(date.formatted(date: .long, time: .omitted))
            .onTapGesture {
                onTap?() // 触发外部传入的回调
            }
    }
}

然后在EditTransactionView中使用时传入切换状态的逻辑：

struct EditTransactionView : View {
    @State var date = Date()
    @State private var showingDateSelector = false
    
    var body: some View {
        NavigationView {
            List {
                DateView(date: $date) {
                    showingDateSelector.toggle()
                }
                
                if showingDateSelector {
                    DatePicker(
                        "选择日期",
                        selection: $date,
                        maximumDate: Date(),
                        displayedComponents: .date
                    )
                }
            }
            .navigationTitle("编辑交易")
        }
    }
}

这种方式把点击逻辑封装在DateView内部，后续如果其他页面用到DateView，可以自定义点击后的行为，扩展性更好。

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