SwiftUI表格背景色修改与内容顶部对齐实现咨询

一、设置表格背景为灰色 #

SwiftUI的Table默认带有系统原生背景，要自定义灰色背景，需要先隐藏默认滚动内容背景，再添加自定义背景样式：

• 给Table添加scrollContentBackground(.hidden)，移除系统默认背景
• 通过.background()设置灰色背景（可根据需求调整透明度或具体色值）

二、实现内容顶部对齐 #

默认状态下TableColumn的内容是垂直居中的，要改为顶部对齐，可通过以下两种方式实现：

1. 给每个TableColumn添加.alignment(.top)，统一设置列内内容的对齐方式
2. 给列内的Text组件设置frame(maxHeight: .infinity, alignment: .top)，让文本在单元格内顶部对齐

修改后的完整代码 #

//
//  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)
                .padding(.bottom, 8)
            Table(users) {
                TableColumn("Cognome", value: \.cognome)
                    .alignment(.top)
                TableColumn("Nome") { user in
                    Text(user.nome)
                        .frame(maxHeight: .infinity, alignment: .top)
                }
                TableColumn("Orario Entrata") { user in
                    Text(user.orarioEntrata)
                        .frame(maxHeight: .infinity, alignment: .top)
                }
                TableColumn("Orario Uscita") { user in
                    Text(user.orarioUscita)
                        .frame(maxHeight: .infinity, alignment: .top)
                }
                TableColumn("Avvisi") { user in
                    Text(user.avvisi)
                        .frame(maxHeight: .infinity, alignment: .top)
                }
            }
            .scrollContentBackground(.hidden)
            .background(Color.gray.opacity(0.2))
            .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()
    }
}

补充说明 #

• 背景色使用Color.gray.opacity(0.2)是为了视觉更柔和，若需要纯灰色可直接替换为Color.gray
• 两种顶部对齐方式可任选其一，示例中混合使用仅作演示，也可统一通过TableColumn的.alignment(.top)实现全局对齐

内容的提问来源于stack exchange，提问作者riki