Question 267456 in IOS Swift Question posted in
The official documentation can be found here.

Ios swift – SwiftUI Header/Title Text Background Color Screen Wide

I want to set the background color for "Sebastian’s Favorite Stuff" to encompass the entire area. Currently it looks like this and I want to cover the white spaces.

App Layout

My Code is as follows:

var body: some View {
    VStack{
        GridRow{
            Text("SEBASTIAN'S FAVORITE STUFF")
                .lineLimit(1)
                .padding(10)
                .font(.system(size: 500))
                .minimumScaleFactor(0.01)
                .colorInvert()
        }
        .background(Color(red: 0.18 , green: 0.59 , blue: 0.65 ))
        HStack{
            ScrollView{
                Grid{

What do I need to adjust so it fills the area and not just the text background?

Tags:

2

Answers


  1. 0

    If you chain .frame(maxWidth: .infinity) on the Text as the last modifier, the background color should extend to the left and right edges.

    Login or Signup to reply.
  2. 0

    A GridRow is expected to be a child of a Grid. So in this case, I wouldn’t use a GridRow and just use Text by itself.

    Then, all you need to do is force the text to use the full width. Since the background will touch the edges of the safe area, it will extend into the safe area too. This is because you are using background(_:ignoresSafeAreaEdges:) (with round parentheses). The default parameter for ignoresSafeAreaEdges is Edge.Set.all.

    Like this:

    VStack{
    Text("SEBASTIAN'S FAVORITE STUFF") // not nested in a GridRow any more
        .lineLimit(1)
        .padding(10)
        .font(.system(size: 500))
        .minimumScaleFactor(0.01)
        .colorInvert()
        .frame(maxWidth: .infinity) // added
        .background(Color(red: 0.18 , green: 0.59 , blue: 0.65 ))
    HStack {
        ScrollView {
            Grid{

    If you want to fill the whole screen background then you could move the background up a level and put it behind the VStack instead. The maxWidth is no longer needed on the Text. It is not needed on the VStack either, because the ScrollView will force the VStack to fill all the space available (a ScrollView is greedy).

    VStack{
    Text("SEBASTIAN'S FAVORITE STUFF")
        .lineLimit(1)
        .padding(10)
        .font(.system(size: 500))
        .minimumScaleFactor(0.01)
        .colorInvert()
    HStack {
        // as before
    }
}
.background(Color(red: 0.18 , green: 0.59 , blue: 0.65 ))

    If that still leaves some gaps then you need to look at the next parent, and so on.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search