You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

SwiftUI下划线文本搭配background材质背景不生效问题咨询

问题描述

为带下划线的文本设置Material类型材质背景时,出现下划线不显示的异常。经测试,粗体、斜体等其他文本修饰符搭配材质背景均可正常生效。以下为最小复现用例与对照实现:

异常复现

var body: some View {
    ZStack {
        LinearGradient(colors: [.orange, .yellow, .red], startPoint: .topLeading, endPoint: .bottomTrailing)
                .ignoresSafeArea()
        Text("Some underlined text")
            .underline()
            .padding()
            .background(.ultraThinMaterial)
    }
}

异常效果:下划线消失的异常渲染效果

正常对照实现

将材质背景替换为普通纯色后,下划线可正常展示:

var body: some View {
    ZStack {
        LinearGradient(colors: [.orange, .yellow, .red], startPoint: .topLeading, endPoint: .bottomTrailing)
                .ignoresSafeArea()
        Text("Some underlined text")
            .underline()
            .padding()
            .background(.white)
    }
}

正常效果:下划线正常显示的效果


原因说明

这是SwiftUI的原生视图层级合成bug,不属于使用方式错误:

  • .underline()修饰符生成的下划线是独立于文本字形的装饰渲染层,当背景为Material模糊材质时,系统会错误将下划线判定为材质层下方的内容,使其参与模糊透传计算,最终导致下划线视觉上消失。
  • 粗体、斜体属于字体字形本身的渲染属性,和文本内容处于同一渲染层,不会被材质层错误过滤,因此可以正常显示。
可用修复方案

两种方案均可保留原有材质的模糊效果,同时正常展示下划线:

  • 方案1:强制独立渲染层合成
    仅需在背景修饰符后追加.compositingGroup(),将文本、下划线、材质合并为独立渲染单元,即可修正层级判定错误,代码改动量最小:
    Text("Some underlined text")
        .underline()
        .padding()
        .background(.ultraThinMaterial)
        .compositingGroup()
    
  • 方案2:手动绘制下划线绕开bug
    如果方案1在低版本iOS/macOS系统存在兼容性问题,可以通过overlay手动绘制和系统默认样式一致的下划线,完全绕开原生修饰符的渲染问题:
    Text("Some underlined text")
        .padding()
        .background(.ultraThinMaterial)
        .overlay(alignment: .bottom) {
            Rectangle()
                .fill(.foreground)
                .frame(height: 1)
                .padding(.bottom, 2)
        }
    

两种方案的最终显示效果和纯色背景下的系统默认下划线效果无感知差异。

内容的提问来源于stack exchange,提问作者Daniel Pustotin

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.30 16:24:29