WWDC24 SALE: Save 50% on all my Swift books and bundles! >>

SOLVED: Why is the background white and not red?

Forums > SwiftUI

I want the background of the view to be red, but as you can see in the screenshot below, it's white. What do I misunderstand?


                    VStack {
                        Text("Hello HWS")
                    .font(.system(size: 15, weight: .regular, design: .rounded))
                    .frame(maxWidth: .infinity, alignment: .center)


Don't you have padding on parent view? Seems like your VStack is a nested view inside another view...

UPD 1:

You seem using List or Form view, they have insets by default. To make color fill all the space you'll need to use .listRowBackground(Color.red)

UPD 2:

Should you require more control or fine tune how the color fills the area you can use .listRowInsets(EdgeInsets())

        List {
            Text("Hello HWS")
                .font(.system(size: 15, weight: .regular, design: .rounded))
                .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .center)
                .listRowInsets(EdgeInsets(top: -20, leading: -20, bottom: -20, trailing: -20))


Thank you @ygeras ! .listRowBackground(Color.red) does the trick :)

Suppose the background of my view is a gradient, do you know how I can match the listRowBackground to the gradient. I can do that by specifying the gradient in listRowBackground, but the position of the Text view needs to take into account the gradient level based on where its displayed in the view.

If that does not make sense, here's an example of what i'm trying to say. The purple part out side of the view is a gradient that goes from dark purple to a very light purple.



Not sure if i fully understood you. You want to make cells to match the gradient color of background? Something like this?


Because if you make the color to mach the background gradient basically the outline becomes invisible and you have to use shadow or maybe border to make it visible...

if the color absolutely matches the background it will be something like this:



Exactly, the second example is what i'm looking for.


Then it is simply adding, you might laugh at this -> .listRowBackground(Color.clear). In programming we don't like to make extra work, why do we need to make gradient color to match the same gradeint color if we can simply use transparent color and see the background in the same way when we scoll up or down. In case you use List views you might see list row seprators, to get rid of those use .listRowSeparator(.hidden) modifier.


Good grief @ygeras , i'm learning so much from folks like you. Thank you very much! Have a great sunday!


My pleasure :) have a nice Sunday too!


Save 50% in my WWDC sale.

SAVE 50% To celebrate WWDC24, all our books and bundles are half price, so you can take your Swift knowledge further without spending big! Get the Swift Power Pack to build your iOS career faster, get the Swift Platform Pack to builds apps for macOS, watchOS, and beyond, or get the Swift Plus Pack to learn advanced design patterns, testing skills, and more.

Save 50% on all our books and bundles!

Archived topic

This topic has been closed due to inactivity, so you can't reply. Please create a new topic if you need to.

All interactions here are governed by our code of conduct.

Unknown user

You are not logged in

Log in or create account

Link copied to your pasteboard.