Change Table Background color Swiftui

Question

Hi the swiftui code below shows a table with a title at the top, what I can't do is change the background of the table to gray and align everything at the top, how can I do? below is the current swiftui code, thanks SwiftUI Code:

//
//  PresenzeUiView.swift
//  clientipad
//
//  Created by riccardo on 06/02/23.
//

import SwiftUI

struct UserTable: Identifiable {
    let id: Int
    var nome: String
    var cognome: String
    var orarioEntrata: String
    var orarioUscita: String
    var avvisi: String
}

struct PresenzeUiView: View {
    @State private var users = [
        UserTable(id: 1, nome: "Michele", cognome: "Rossi", orarioEntrata: "08:00", orarioUscita: "20:00", avvisi: "prova"),
        UserTable(id: 2, nome: "Michele", cognome: "Rossi", orarioEntrata: "08:00", orarioUscita: "20:00", avvisi: "prova"), UserTable(id: 1, nome: "Michele", cognome: "Rossi", orarioEntrata: "08:00", orarioUscita: "20:00", avvisi: "prova"),
        UserTable(id: 3, nome: "Michele", cognome: "Rossi", orarioEntrata: "08:00", orarioUscita: "20:00", avvisi: "prova"),
    ]

    var body: some View {
        VStack {
            Text("Storico Presenze").foregroundColor(.black)
            Table(users) {
                TableColumn("Cognome", value: \.cognome)
                TableColumn("Nome") { user in
                    Text(String(user.nome))
                }
                TableColumn("Orario Entrata") { user in
                    Text(String(user.orarioEntrata))
                }
                TableColumn("Orario Uscita") { user in
                    Text(String(user.orarioUscita))
                }
                TableColumn("Avvisi") { user in
                    Text(String(user.avvisi))
                }
            }.frame(width: UIScreen.screenWidth - 400, height: UIScreen.screenHeight - 400)

        }.background(Color.white).frame(width: UIScreen.screenWidth - 300, height: UIScreen.screenHeight)
    }
}

struct PresenzeUiView_Previews: PreviewProvider {
    static var previews: some View {
        PresenzeUiView()
    }
}

Answer 1

To make the background of the VStack visible, you just need to hide the background of the Table, using:

.scrollContentBackground(.hidden)

e.g.

    var body: some View {
        VStack {
            Text("Storico Presenze").foregroundColor(.black)
            Table(users) {
                TableColumn("Cognome", value: \.cognome)
                TableColumn("Nome") { user in
                    Text(String(user.nome))
                }
                TableColumn("Orario Entrata") { user in
                    Text(String(user.orarioEntrata))
                }
                TableColumn("Orario Uscita") { user in
                    Text(String(user.orarioUscita))
                }
                TableColumn("Avvisi") { user in
                    Text(String(user.avvisi))
                }
            }
            .scrollContentBackground(.hidden)
            .padding()
        }
        .background(.gray)
        .padding(150)
    }

Also, try using SwiftUI .padding to size your views relative to a container, rather than resorting to UIKit's UIScreen.etc