When I tried to display an underlined text with background material, I faced a problem
After some work around, I succeeded in creating the minimal test case that does not work as I expect
Could you please tell me, that is my wrong expectations, or I just missed something?
BTW: That works fine with other text modifiers, such as .bold()
or .italic()
Here is an example to reproduce the bug:
var body: some View {
ZStack {
LinearGradient(colors: [.orange, .yellow, .red], startPoint: .topLeading, endPoint: .bottomTrailing)
.ignoresSafeArea()
Text("Some underlined text")
.underline()
.padding()
.background(.ultraThinMaterial)
}
}
Works fine:
var body: some View {
ZStack {
LinearGradient(colors: [.orange, .yellow, .red], startPoint: .topLeading, endPoint: .bottomTrailing)
.ignoresSafeArea()
Text("Some underlined text")
.underline()
.padding()
.background(.white)
}
}
2
Answers
It’s probably looks like bug. But you can use next modifier to achieve normal behavior
Implement it to your text view
Add this one to your code will fix your problem.