SwiftUI macOS开发：实现隐藏TextField的单Emoji选择按钮

我们可以通过隐藏TextField并自定义绑定控制输入为单个Emoji来实现需求，同时保留系统默认Emoji选择器的功能。具体实现如下：

完整代码 #

import SwiftUI

struct ContentView: View {
    @State private var emojiText: String = ""
    
    // 自定义Binding，确保每次选中的Emoji直接替换原有内容
    private var emojiBinding: Binding<String> {
        Binding(
            get: { emojiText },
            set: { newValue in
                // 系统Emoji选择器返回的是单个完整Emoji字符串，直接替换即可
                emojiText = newValue
            }
        )
    }
    
    // 控制隐藏TextField的焦点状态
    @FocusState private var isTextFieldFocused: Bool
    
    var body: some View {
        VStack {
            // 完全隐藏的TextField，仅用于接收Emoji输入
            TextField("", text: emojiBinding)
                .focused($isTextFieldFocused)
                .opacity(0)
                .frame(width: 0, height: 0)
                .allowsHitTesting(false) // 禁止用户交互
            
            // Emoji选择按钮，显示当前选中的Emoji或默认图标
            Button(emojiText.isEmpty ? "😀" : emojiText) {
                isTextFieldFocused = true // 先让隐藏TextField获得焦点
                DispatchQueue.main.async {
                    // 延迟调用确保焦点已生效，打开系统字符面板
                    NSApp.orderFrontCharacterPalette(nil)
                }
            }
            .frame(width: 30, height: 30)
            .buttonBorderShape(.circle)
            
            Button("Print Emoji") {
                print(emojiText)
            }.padding()
        }
        .padding()
    }
}

关键说明 #

• 隐藏TextField：通过opacity(0)、极小尺寸和allowsHitTesting(false)让TextField完全不可见且无法被用户点击，但仍能保持可聚焦状态，满足系统字符面板的输入要求。
• 自定义Binding：直接用新选中的Emoji替换原有内容，确保始终只有单个Emoji（系统选择器每次选中一个Emoji时会返回完整的单个Emoji字符串）。如果需要严格校验输入是否为Emoji，可以在set方法中添加字符类型判断。
• 焦点控制：使用FocusState管理TextField的焦点，按钮点击时先让隐藏TextField获得焦点，再延迟打开字符面板，确保输入能正确绑定到变量。
• 默认按钮标签：当未选中任何Emoji时，显示默认的😀图标，明确按钮功能。

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