SwiftUI中Segmented Control上方有视图时无响应问题求助

ToolbarItem(placement: .principal) 是导航栏中用于放置标题的位置，默认布局高度有限。当你在其中嵌套包含HStack和SegmentedPicker的VStack时，整个视图的高度会超出该位置的默认可交互区域范围，导致Picker的触摸响应区域被截断，出现点击无效或触摸区域缩小的问题。

调整ToolbarItem中VStack的布局约束，同时让导航栏能够适配内容高度，具体修改如下：

struct DetailView: View {
    
    @State private var selection = 0
    
    var body: some View {
        NavigationStack {
            VStack {
                if selection == 0 {
                    MoreInfos()
                } else {
                    Settings()
                }
            }
            .toolbar {
                ToolbarItem(placement: .principal) {
                    VStack(spacing: 12) { // 适当缩小间距，避免高度过高
                        HStack(spacing: 10) {
                            Image("app_icon")
                                .resizable()
                                .aspectRatio(contentMode: .fit)
                                .frame(height: 38)
                            VStack(alignment: .leading, spacing: 1) {
                                Text("Wonder day")
                                    .font(.system(size: 17))
                                    .fontWeight(.bold)
                                Text("Info & Settings")
                                    .font(.system(size: 16))
                                    .opacity(0.7)
                            }
                            Spacer()
                        }
                        
                        Picker("View", selection: $selection) {
                            Text("More infos").tag(0)
                            Text("Settings").tag(1)
                        }
                        .pickerStyle(SegmentedPickerStyle())
                        .frame(height: 32) // 明确Picker高度，确保触摸区域完整
                    }
                    .frame(maxWidth: .infinity) // 让VStack占满导航栏宽度
                    .padding(.vertical, 8) // 添加垂直内边距，避免内容贴边
                }
            }
            .toolbarBackground(.white)
            .toolbarBackground(.visible, for: .navigationBar)
            .navigationBarTitleDisplayMode(.inline) // 设置标题为行内模式，允许导航栏适配高度
        }
        .ignoresSafeArea()
    }
}

• 添加 .navigationBarTitleDisplayMode(.inline)：让导航栏根据内容自动调整高度，避免内容超出可交互区域
• 给VStack设置 frame(maxWidth: .infinity)：确保内容占满导航栏宽度，避免布局偏移
• 明确Picker的高度 .frame(height: 32)：固定Picker的触摸区域大小，防止被挤压
• 调整VStack的spacing和垂直padding：优化布局，确保所有内容都在导航栏的可交互范围内

如果上述修改仍有问题，可以尝试将HStack和Picker拆分为两个独立的ToolbarItem，分别放置在合适的位置，彻底避免高度冲突：

.toolbar {
    ToolbarItem(placement: .principal) {
        HStack(spacing: 10) {
            Image("app_icon")
                .resizable()
                .aspectRatio(contentMode: .fit)
                .frame(height: 38)
            VStack(alignment: .leading, spacing: 1) {
                Text("Wonder day")
                    .font(.system(size: 17))
                    .fontWeight(.bold)
                Text("Info & Settings")
                    .font(.system(size: 16))
                    .opacity(0.7)
            }
            Spacer()
        }
        .frame(maxWidth: .infinity)
    }
    ToolbarItem(placement: .navigationBarBottom) { // 使用导航栏底部位置放置Picker
        Picker("View", selection: $selection) {
            Text("More infos").tag(0)
            Text("Settings").tag(1)
        }
        .pickerStyle(SegmentedPickerStyle())
        .frame(maxWidth: .infinity)
        .padding(.horizontal)
    }
}

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