[SOLVED] SwiftUI low opacity button with regular text

SwiftUI low opacity button with regular text

I am building an app in SwiftUI and am really running into a slight inconvenience. I am using buttons with navigationlinks with text to navigate to different pages. I need the circles to have a low opacity so that you can still look through them, but when i do that the text instantly becomes low opacity as well. How do i prevent the text from changing opacity (or staying normal opacity).

Button(action: {
    print("Floating Button Click")
}, label: {
    NavigationLink(destination: QuestionView(bodyPart: bodyPart, caseData: CaseData(bodyPart: bodyPart))){
        Text(String(describing: bodyPart.rawValue))
            .foregroundColor(.white)
            .frame(width: size, height: size, alignment: .center)
    }
})
.background(Color.blue)
.opacity(0.5)
.clipShape(Circle())

I have already tried to give text its own opacity, however that didn't do anything as it still gets overwritten.

Does anyone have a solution for this, I look forward to see any answers.

Solution

You just have apply opacity to the background like so:

.background(Color.blue.opacity(0.5))

and not the whole View, like so:

.background(Color.blue)
.opacity(0.5)