SwiftUI中Alert无法显示SF Symbol：问题原因及解决方法求助

问题原因 #

Alert的message参数接收的Text视图，底层基于UIKit的UIAlertController实现，它不支持在文本中嵌入Image（包括SF Symbol）。虽然普通SwiftUI的Text组件可以通过插值或视图组合显示图片，但Alert的文本渲染逻辑不支持这种富文本形式，直接插入Image会被忽略，导致符号无法显示。

解决方法 #

方法1：使用SF Symbol对应的Unicode字符 #

每个SF Symbol都有对应的Unicode编码，直接将字符插入字符串中，就能让Alert的Text正常显示符号。例如checkmark.circle可使用\u{2714}\u{FE0F}（带彩色变体的对勾圆圈），修改代码如下：

struct ContentView: View {
    @State var showsAlert = false
    var body: some View {
        Text("Well done \(Image(systemName: \"checkmark.circle\"))")
            .padding(10)
        Button(action: {
            showsAlert.toggle()
        }) {
            Text("Show Alert")
        }
        .alert(isPresented: $showsAlert) {
            Alert(title: Text("Title"),
                  message: Text("Well done \u{2714}\u{FE0F}"))
        }
    }
}

若需要更精准匹配SF Symbol样式，可查询苹果官方文档找到对应符号的Unicode值替换即可。

方法2：自定义弹窗模拟Alert #

如果需要更复杂的布局（比如图片与文字的排版、自定义样式），可以用SwiftUI的Sheet组件实现自定义弹窗，完全自由控制视图内容：

struct CustomAlertView: View {
    @Binding var isPresented: Bool
    
    var body: some View {
        VStack(spacing: 20) {
            Text("Title")
                .font(.title)
                .fontWeight(.bold)
            HStack(spacing: 8) {
                Text("Well done")
                Image(systemName: "checkmark.circle")
                    .foregroundColor(.green)
            }
            .font(.body)
            Button("OK") {
                isPresented = false
            }
            .padding(.horizontal, 32)
            .padding(.vertical, 10)
            .background(Color.blue)
            .foregroundColor(.white)
            .cornerRadius(8)
        }
        .padding()
        .background(Color.white)
        .cornerRadius(16)
        .shadow(color: .black.opacity(0.2), radius: 10, x: 0, y: 4)
        .frame(maxWidth: 320)
    }
}

struct ContentView: View {
    @State var showsAlert = false
    var body: some View {
        Text("Well done \(Image(systemName: \"checkmark.circle\"))")
            .padding(10)
        Button(action: {
            showsAlert.toggle()
        }) {
            Text("Show Alert")
        }
        .sheet(isPresented: $showsAlert) {
            CustomAlertView(isPresented: $showsAlert)
                .background(Color.black.opacity(0.4))
                .edgesIgnoringSafeArea(.all)
        }
    }
}

这种方式可以完全自定义弹窗的样式、布局和交互，满足更复杂的需求。

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