Home > OS >  SwiftUI Button Disable styling does not work in some cases
SwiftUI Button Disable styling does not work in some cases

Time:12-31

I have the following button in a custom view that I reuse in multiple places

                    Button(action: { selectedDate = date }) {
                    VStack {
                        Text(day.shortName)
                            .font(.caption2)
                            .foregroundColor(isSelectedDate ? .white : .primary)
                            .frame(maxWidth: .infinity)
                        
                        Spacer().frame(height: 7)
                        
                        Text("\(date.dayOfMonth)")
                            .bold()
                            .foregroundColor(isSelectedDate ? .white : .primary)
                            .frame(maxWidth: .infinity)
                    }
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
                    .background(Color.purple.brightness(isSelectedDate ? 0 : 0.6))
                    .clipped()
                }.disabled(isInPast)

Dates in the past supposed to be disabled, and I confirmed that they are actually disabled as expected; however, the disabled styling looks different in multiple screens although it's the exact same view being used.

What could cause the disable state to not be styled accordingly in some screens?

In both screenshots dates from 25-29 are disabled

enter image description here

enter image description here

In both usages I simply add the view to a VStack

var body: some View {
    VStack {
        WeekView(selectedDate: $booking.selectedDate).padding()

var body: some View {
    VStack(spacing: 0) {
        WeekView(selectedDate: $selectedDate)
            .padding(.horizontal)
            .padding(.bottom)
        

CodePudding user response:

Don't rely on primary color. Use a custom color and use isInPast to make an opacity.

CodePudding user response:

Figured it out, the parent in one of the screens had .buttonStyle(.plain) which makes the disabled styling work as expected. So I just dded that to the component itself to make sure the disabled styling is always in place

  • Related