Custom Button in SwiftUI List

Question

I'm trying to create a custom button in a SwiftUI List. I want it to have a blue background with white text, and importantly, to remain blue and go to 50% opacity when pressed, not the default grey.

I tried using a custom ButtonStyle, but when I do so, the tappable area of the button is reduced to just the label itself. If I tap any other part of the cell, the colour doesn't change. If I remove the ButtonStyle, tapping anywhere on the cell works

How can I fix this so that I get my custom colours, including the colour when tapped, but the whole cell is still tappable?

import SwiftUI

struct BlueButtonStyle: ButtonStyle {

  func makeBody(configuration: Self.Configuration) -> some View {
    configuration.label
        .font(.headline)
        .foregroundColor(configuration.isPressed ? Color.white.opacity(0.5) : Color.white)
        .listRowBackground(configuration.isPressed ? Color.blue.opacity(0.5) : Color.blue)
  }
}

struct ExampleView: View {

    var body: some View {
        NavigationView {
            List {
                Section {
                    Text("Info")
                }

                Section {
                    Button(action: {print("pressed")})
                    {
                        HStack {
                            Spacer()
                            Text("Save")
                            Spacer()
                        }

                    }.buttonStyle(BlueButtonStyle())
                }
            }
            .listStyle(GroupedListStyle())
            .environment(\.horizontalSizeClass, .regular)
            .navigationBarTitle(Text("Title"))
        }
    }
}

struct ExampleView_Previews: PreviewProvider {
    static var previews: some View {
        ExampleView()
    }
}

Martijn Pieters · Accepted Answer · 2022-08-23 07:12:55Z

19

In standard variant List intercepts and handles content area of tap detection, in your custom style it is defined, by default, by opaque area, which is only text in your case, so corrected style is

Update for: Xcode 13.3 / iOS 15.4

It looks like Apple broken something, because listRowBackground now works only inside List itself, no subview, which is senseless from generic concept of SwiftUI.

Updated solution with same behavior as on demo

Original for: Xcode 11.4 / iOS 13.4

struct BlueButtonStyle: ButtonStyle {

  func makeBody(configuration: Self.Configuration) -> some View {
    configuration.label
        .font(.headline)
        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .center)
        .contentShape(Rectangle())
        .foregroundColor(configuration.isPressed ? Color.white.opacity(0.5) : Color.white)
        .listRowBackground(configuration.isPressed ? Color.blue.opacity(0.5) : Color.blue)
  }
}

and usage, just

Button(action: {print("pressed")})
{
    Text("Save")
}.buttonStyle(BlueButtonStyle())

and even

Button("Save") { print("pressed") }
    .buttonStyle(BlueButtonStyle())

edited Aug 23, 2022 at 7:12

Martijn Pieters

1.1m326 gold badges4.2k silver badges3.4k bronze badges

answered Apr 2, 2020 at 16:15

Asperi

262k28 gold badges594 silver badges889 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Niklas Over a year ago

the listRowBackground() will no longer work, tested on iOS 15, any ideas how to solve? I am using it inside a Form

Marek Bodziony Over a year ago

@Niklas try .background()

erotsppa Over a year ago

This is now a bit buggy in iOS 16/Xcode 14.2. The button highlight state doesn't animate all the time. @Asperi

Codey · Accepted Answer · 2025-03-24 06:45:09Z

For everybody experiencing the issue, that the press down animation doesn't work properly for custom buttons in a SwiftUI List, you can add a DragGesture to the Button, this will overwrite the Lists behavior of intercepting touches.

Button("Save") { print("pressed") }
    .buttonStyle(BlueButtonStyle())
    .gesture(DragGesture(minimumDistance: 0))

This gives you the immediate interaction back, however the default press down/up animations don't work anymore. So you need to handle that in the custom button style:

struct BlueButtonStyle: ButtonStyle {

  func makeBody(configuration: Self.Configuration) -> some View {
    configuration.label
        // ...
        .animation(configuration.isPressed ? nil : .easeOut(duration: 0.3), value: configuration.isPressed)
  }
}

Collectives™ on Stack Overflow

Custom Button in SwiftUI List

2 Answers 2

Update for: Xcode 13.3 / iOS 15.4

Original for: Xcode 11.4 / iOS 13.4

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Update for: Xcode 13.3 / iOS 15.4

Original for: Xcode 11.4 / iOS 13.4

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related