Search code examples
swiftxcodelistswiftuistyling

How do I make the background of a SwiftUI list transparent?


I am trying to make the list transparent so just the number of steps and the date they were taken appear on the background. Is there a way to make the grey background transparent and also do the same to the white in the cells of the list?

CustomNavigationLink(title: "Steps (Last 7 Days)") {
    List(listSteps, id: \.id) { stepList in
        VStack(alignment: .leading) {
            Text("\(stepList.count)")
                .font(.custom(customFont, size: 40))
                .fontWeight(.semibold)
            Text(stepList.date, style: .date)
                .opacity(0.5)
                .font(.custom(customFont, size: 20))
                .foregroundColor(.cyan)
                .padding(1)
        }
    }
    .background(Image("GreenBG"))
    .navigationTitle("Steps (last 7 days)")
    .padding()
}

Solution

  • What you need is to set your VStack's list row background to clear:

    VStack(alignment: .leading) {
        Text("\(stepList.count)")
            .font(.custom(customFont, size: 40))
            .fontWeight(.semibold)            
        Text(stepList.date, style: .date)
            .opacity(0.5)
            .font(.custom(customFont, size: 20))
            .foregroundColor(.cyan)
            .padding(1)
    }
    .listRowBackground(Color.clear)