SwiftUI中如何实现可点击邮箱地址的字体与颜色自定义？

要实现邮箱可点击且样式与文本统一的效果，推荐使用AttributedString来完全控制文本样式和链接属性，这是最简洁且灵活的方案。

解决方案1：使用AttributedString（推荐） #

通过AttributedString可以给整个文本设置基础样式，同时单独为邮箱部分添加链接属性，确保样式统一且保留交互：

var styledTextWithLink: AttributedString {
    // 初始化原始文本
    var fullText = AttributedString("Reach out to us on info@eyva.io for any queries!")
    
    // 设置全局基础样式（字体、颜色）
    let baseStyle: AttributeContainer = [
        .font: Font.custom("Poppins-Regular", size: getFontSize(value: 16)),
        .foregroundColor: Color.white
    ]
    fullText.mergeAttributes(baseStyle)
    
    // 定位邮箱文本范围，添加链接属性并复用基础样式
    if let emailRange = fullText.range(of: "info@eyva.io") {
        var emailStyle = AttributeContainer()
        // 设置邮箱链接（mailto协议）
        emailStyle.link = URL(string: "mailto:info@eyva.io")
        // 复用全局样式，确保邮箱和普通文本样式一致
        emailStyle.merge(baseStyle)
        // 可选：添加下划线区分链接
        // emailStyle.underlineStyle = NSUnderlineStyle.single.rawValue
        
        fullText[emailRange].mergeAttributes(emailStyle)
    }
    
    return fullText
}

// 在视图中使用
Text(styledTextWithLink)

解决方案2：拼接Text组件（适合简单场景） #

如果文本结构简单，也可以将普通文本和邮箱文本拆分后拼接，手动给邮箱添加点击手势：

(Text("Reach out to us on ")
 + Text("info@eyva.io")
    .foregroundColor(.white)
    .font(Font.custom("Poppins-Regular", size: getFontSize(value: 16)))
    .underline()
    .onTapGesture {
        // 打开邮箱客户端
        if let mailURL = URL(string: "mailto:info@eyva.io") {
            UIApplication.shared.open(mailURL)
        }
    }
 + Text(" for any queries!"))
.foregroundColor(.white)
.font(Font.custom("Poppins-Regular", size: getFontSize(value: 16)))

方案对比 #

• AttributedString：适合长文本、多链接场景，代码更简洁，样式控制更统一。
• 拼接Text：适合短文本、简单链接场景，直观但灵活性较差。

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