SwiftUI：SettingsPane聚焦输入组件时出现异常透明覆盖层求助

问题原因 #

这个透明覆盖层是因为你把popover附加到了包含输入框的Group上。SwiftUI的Form和Section在处理输入框聚焦时，会和popover的布局逻辑产生冲突，导致出现这个异常的半透明遮罩。

解决方案 #

把popover从Group上移到触发它的问号按钮上——毕竟popover本来就是和这个按钮关联的，这样就不会干扰输入框的聚焦状态了。修改后的核心代码如下：

HStack(alignment: .center) {
    Group {
        if isSecured {
            SecureField("Jira API Key", text: $jiraApiKey)
                .textContentType(.password)
                .frame(width: frameWidth)
                .lineLimit(1)
        } else {
            TextField("Jira API Key", text: $jiraApiKey)
                .textContentType(.password)
                .frame(width: frameWidth)
                .lineLimit(1)
        }
    }

    Button(action: {
        isSecured.toggle()
    }) {
        Image(systemName: self.isSecured ? "eye.slash" : "eye")
            .accentColor(.gray)
    }
    .buttonStyle(.borderless)
    
    Button(action: {
        showApiKeyPopover.toggle()
    }) {
        Image(systemName: "questionmark.circle.fill")
            .accentColor(.gray)
    }
    .buttonStyle(.borderless)
    // 把popover移到这个按钮上
    .popover(isPresented: $showApiKeyPopover) {
        Text("要获取API密钥请访问你的Jira个人资料。\n点击「个人访问令牌」，创建一个名为「Firehose」的令牌并填入此字段")
            .padding()
    }
}

额外优化建议：

• 尽量避免给Form内的输入框设置固定frame(width:)，Form本身具备自适应布局能力，固定宽度可能引发不必要的布局冲突
• 如果问题仍存在，可以尝试给Form添加.formStyle(.grouped)明确指定样式，规避系统默认样式的潜在异常

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