Module 5, Lesson 10 - text for Buttons graying out

App Development
1

In Swift Test

When I use Chris’s LeaningApp code and I press check answer:

The text on the choices grays out

This caused by .disabled(submitted)

how do I fix this?

2

so you don’t want the text to get greyed-out/disabled? you can just remove the .diabled then and maybe change the border color or something instead

3

Hello,

I believe this may still be a problem. It seems like the styling associated with a disabled button has changed in a newer version of SwiftUI. However, if we remove the disabled() modifier, then the logic of the app is broken as the user can then select a new answer after they have already submitted.

Looking for options to apply different styling to a disabled button?

Thank you!

4

Can you provide a screen shot of what you are seeing on the simulator that you are using when the button is disabled.

5

Sorry for the delay, attached is a screen shot of what I am seeing.

Screen Shot 2022-01-04 at 6.24.16 AM
Screen Shot 2022-01-04 at 6.24.16 AM1024×1918 135 KB

6

No worries Cole. As it happens I see that same behaviour when I run the App under Xcode 13.2.1. I don’t know why.
I created a test project with a couple of simple buttons and the same behaviour did not occur which is odd.

struct ContentView: View {
    @State private var isDisabled = false
    
    var body: some View {
        VStack {
            Button(action: {
                isDisabled.toggle()
            }) {
                ZStack {
                    RoundedRectangle(cornerRadius: 10)
                        .fill(Color.green)
                    Text(isDisabled ? "Enable" : "Disable" )
                        .font(.title2)
                        .bold()
                        .foregroundColor(.white)
                }
                .frame(width: 350, height: 60)
            }

            Button(action: {

            }) {
                ZStack {
                    RoundedRectangle(cornerRadius: 10)
                        .fill(Color.green)
                    Text("Tap the other one")
                        .font(.title2)
                        .bold()
                        .foregroundColor(.white)
                }
                .frame(width: 350, height: 60)
            }
            .disabled(isDisabled)
        }
    }
}
7

I am having the same issue and tried googling for a fix but couldn’t really find anything solid.

I assume that there should be some sort of modifier or workaround for this but I can’t find it on my own .

Edit: I was able to find a workaround by adding the foreground(.black) modifier to my text element

Button {
                                
                                selectedIndex = index
                                
                            } label: {
                                
                                ZStack {
                                    RectangleCard(color: index == selectedIndex ? .gray : .white )
                                        .frame(height: 48)

                                    Text(model.currentQuestion!.answers[index])
                                        .foregroundColor(.black)
                                }
                               
                            }
                            .disabled(submitted)
1 Like