SwiftUI可排序表头添加及相关布局问题咨询

1. 创建带可排序表头的最优方案 #

核心是通过ViewModel维护排序状态，表头触发排序逻辑，动态更新列表数据源：

• 在ViewModel中定义排序字段（如price/average）、排序方向（升序/降序）的可发布状态
• 表头的可排序列用Button包装，点击时切换排序状态，同时显示对应排序图标
• 基于排序状态对数据源做动态排序，ForEach遍历排序后的数组

示例代码：

// ViewModel排序逻辑实现
class OrderByViewModel: ObservableObject {
    enum SortField {
        case price, average, anotherDouble
    }
    @Published var sortField: SortField = .price
    @Published var isAscending: Bool = true
    var stats: [PlayerQuotation] = [] // 原始数据源
    
    func toggleSort(for field: SortField) {
        if sortField == field {
            isAscending.toggle()
        } else {
            sortField = field
            isAscending = true
        }
    }
    
    // 动态排序后的数据源
    var sortedStats: [PlayerQuotation] {
        switch sortField {
        case .price:
            return stats.sorted { isAscending ? $0.price < $1.price : $0.price > $1.price }
        case .average:
            return stats.sorted { isAscending ? $0.statistics.fantaAverage < $1.statistics.fantaAverage : $0.statistics.fantaAverage > $1.statistics.fantaAverage }
        case .anotherDouble:
            return stats.sorted { isAscending ? $0.statistics.voteAverage < $1.statistics.voteAverage : $0.statistics.voteAverage > $1.statistics.voteAverage }
        }
    }
}

// 可排序表头组件
struct QuotationOrderByHeaders: View {
    @ObservedObject var viewModel: OrderByViewModel
    
    var body: some View {
        GridRow {
            // 第一列：筛选按钮
            HStack { /* 你的筛选按钮代码 */ }
            Spacer() // 第二列空白占位
            // Price列可排序按钮
            Button(action: { viewModel.toggleSort(for: .price) }) {
                HStack {
                    Text("Price")
                    Image(systemName: viewModel.sortField == .price ? (viewModel.isAscending ? "arrow.up" : "arrow.down") : "")
                }
            }
            // Average列可排序按钮
            Button(action: { viewModel.toggleSort(for: .average) }) {
                HStack {
                    Text("Average")
                    Image(systemName: viewModel.sortField == .average ? (viewModel.isAscending ? "arrow.up" : "arrow.down") : "")
                }
            }
            // AnotherDouble列可排序按钮
            Button(action: { viewModel.toggleSort(for: .anotherDouble) }) {
                HStack {
                    Text("AnotherDouble")
                    Image(systemName: viewModel.sortField == .anotherDouble ? (viewModel.isAscending ? "arrow.up" : "arrow.down") : "")
                }
            }
        }
    }
}

// List中使用排序后的数据
ForEach(viewModel.sortedStats) { stat in
    QuotationGridRow(quotation: stat)
    if stat != viewModel.sortedStats.last {
        Divider().gridCellUnsizedAxes([.horizontal, .vertical])
    }
}

2. GridRow嵌套List时应用.listRowBackground修饰符 #

注意：直接给GridRow添加.listRowBackground不会生效，因为GridRow是Grid的子元素，List的行修饰符仅作用于List的直接子视图。推荐两种方案：

方案一：将数据行包裹为List直接子视图 #

把每个GridRow和分隔符放在VStack中，给VStack添加背景修饰符：

ForEach(viewModel.sortedStats) { stat in
    VStack(spacing: 0) {
        QuotationGridRow(quotation: stat)
        if stat != viewModel.sortedStats.last {
            Divider().gridCellUnsizedAxes([.horizontal, .vertical])
        }
    }
    .listRowBackground(Color.gray.opacity(0.1)) // 自定义行背景
}

方案二：给整个Grid添加背景 #

如果整个表格是一个完整的Grid，直接给Grid添加.listRowBackground，并确保Grid占满List宽度：

List {
    Grid {
        quotationHeader.gridCellUnsizedAxes([.horizontal, .vertical])
        Divider().gridCellUnsizedAxes([.horizontal, .vertical])
        ForEach(viewModel.sortedStats) { stat in
            QuotationGridRow(quotation: stat)
            if stat != viewModel.sortedStats.last {
                Divider().gridCellUnsizedAxes([.horizontal, .vertical])
            }
        }
    }
    .listRowBackground(Color.gray.opacity(0.1))
    .listRowSeparator(.visible)
}

3. 表头与列对齐+数值列右对齐 #

通过Grid的列对齐规则，统一表头和数据行的对齐方式：

步骤1：设置Grid全局列对齐 #

在Grid上指定每一列的对齐方式，确保全局一致性：

Grid {
    // ... 表头、分隔符、数据行
}
.gridColumnAlignment(.leading, for: 0) // 第一列左对齐
.gridColumnAlignment(.leading, for: 1) // 第二列左对齐
.gridColumnAlignment(.trailing, for: 2...4) // 第3-5列（Price/Average/AnotherDouble）右对齐

步骤2：同步表头和数据行的对齐设置 #

修改QuotationGridRow，给数值列显式设置右对齐：

struct QuotationGridRow: View {
    var quotation: PlayerQuotation
    var body: some View {
        GridRow() {
            VStack(alignment: .leading) {
                Text(quotation.surname)
                Text(String(quotation.teamId)).foregroundColor(.secondary)
            }
            Spacer()
            Text(String(quotation.price))
            Text("\(quotation.statistics.fantaAverage, specifier: \"%.2f\")")
            Text("\(quotation.statistics.voteAverage, specifier: \"%.2f\")")
        }
    }
}

修改表头组件，确保按钮与对应列对齐一致：

struct QuotationOrderByHeaders: View {
    @ObservedObject var viewModel: OrderByViewModel
    
    var body: some View {
        GridRow {
            HStack { /* 筛选按钮 */ }
            Spacer()
            Button(action: { viewModel.toggleSort(for: .price) }) {
                HStack { Text("Price"); sortIcon(for: .price) }
            }
            Button(action: { viewModel.toggleSort(for: .average) }) {
                HStack { Text("Average"); sortIcon(for: .average) }
            }
            Button(action: { viewModel.toggleSort(for: .anotherDouble) }) {
                HStack { Text("AnotherDouble"); sortIcon(for: .anotherDouble) }
            }
        }
    }
    
    private func sortIcon(for field: OrderByViewModel.SortField) -> Image {
        let systemName = viewModel.sortField == field ? (viewModel.isAscending ? "arrow.up" : "arrow.down") : ""
        return Image(systemName: systemName)
    }
}

这样就能保证表头与数据列严格对齐，且指定数值列统一右对齐。

内容的提问来源于stack exchange，提问作者dr.s