[Office Hours] List Row Stylings

[kkellybonilla]

Related Discussion

Hi! I'm working on my PatientDetail view, which I have wrapped within a list. I'd like to make the following buttons inside my list different colors, which I can achieve by using .listRowBackground() on each Button; however, this overrides the .listRowBackground() styling I applied to the entire section.

• 
  • .listRowBackground() on Section
• 
  • .listRowBackground() on Button, overriding the one on Section

I need the .listRowBackground() styling to remain on the entire Section, for that's the only way I'm able to create padding between these buttons. When I use .listRowBackground() on each Button and add padding, the padding applies to inside each button, not between them. Using .background() on each Button also doesn't work, as it solely colors the background of the text and not the entire list row.

Does anyone know how to achieve the desired styling?
I want it to look like this without all that gray space in between the buttons (in this screenshot, the buttons are in two separate sections):

My Code:

List {
      ...
      Section {
	      Button(action: {
		      print("blood transfusion button tapped")
	      }, label: {
		      HStack {
			      Text("Needs Blood Transfusion")
			      Image(systemName: "syringe")
		      }
		      .fontWeight(.semibold)
		      .foregroundStyle(.red)
		      .frame(minWidth: 0, maxWidth: .infinity, alignment: .center)
		      .padding(10)
	      })
	      
	      Button(action: {
		      print("prescribe medication button tapped")
	      }, label: {
		      HStack {
			      Text("Prescribe Medication")
			      Image(systemName: "pills")
		      }
		      .fontWeight(.semibold)
		      .foregroundStyle(.blue)
		      .frame(minWidth: 0, maxWidth: .infinity, alignment: .center)
		      .padding(10)
	      })
      }
      .listRowBackground(
	      RoundedRectangle(cornerRadius: 30)
		      .padding(.vertical, 5)
      )
      ...
}

Reproduction

N/A

Additional context

This video is where I learned this styling if helpful in understanding my code

Code of Conduct

• I agree to follow this course's Code of Conduct and Contributing Guidelines

[kkellybonilla]

Solved it! For reference, here is how I was able to achieve my desired styling:

Resources that helped me:

• https://sarunw.com/posts/swiftui-button-background-color/
• https://youtu.be/tjR1hLg4-wc?si=ADHHMvFHCEVtrCTi

Section(content: {
	PatientDetailButton(
		isShowing: $isShowingBloodTransfusionList,
		buttonText: "Get Blood Transfusion",
		buttonIcon: "syringe",
		buttonTint: .red
	)
	
	PatientDetailButton(
		isShowing: $isShowingPrescribeMedicationForm,
		buttonText: "Prescribe Medication",
		buttonIcon: "pills",
		buttonTint: .blue
	)
})
.listRowBackground(Color.clear)
.listRowSeparator(.hidden)
.padding([.leading, .trailing], -20)
.sheet(isPresented: $isShowingPrescribeMedicationForm, content: {
	PrescribeMedicationForm()
})

struct PatientDetailButton: View {
	@Binding var isShowing: Bool
	var buttonText: String
	var buttonIcon: String
	var buttonTint: Color
	
    var body: some View {
		Button(action: {
			isShowing.toggle()
		}) {
			HStack(content: {
				Text(buttonText)
				Image(systemName: buttonIcon)
			})
			.fontWeight(.semibold)
			.frame(minWidth: 0, maxWidth: .infinity, alignment: .center)
			.padding(10)
		}
		.buttonStyle(.bordered)
		.tint(buttonTint)
		.cornerRadius(20)
		.padding([.bottom], -10)
    }
}

#Preview {
	PatientDetailButton(
		isShowing: .constant(false),
		buttonText: "Button Text",
		buttonIcon: "circle",
		buttonTint: .black
	)
}

[vishnuravi]

Nice work @kkellybonilla!