将字幕和页脚与LazyVGrid对齐？

Question

关于如何使用LazyVGrid对齐每一列的字幕和页脚，我有一个问题。如果我有这样的看法：

 Title


 Subtitle A     Subtitle B     Subtitle C

   row1A          row1B          row1C
   row2A          row2B          row2C
   row3A          row3B          row3C
   row4A          row4B          row4C
   row5A          row5B          row5C

  Total A        Total B        Total C

目前，我使用几何阅读器来显示页眉和页脚，使用LazyVGrid显示数据。我注意到，如果我用12 ProMax模拟器排列字幕，然后查看我在12 Mini模拟器上的设置，迷你标题已经移动，而且看起来不太专业。是否可以在LazyVGrid中使用类似下面的内容来显示数据，同时还可以显示字幕和页脚？使用pinnedViews：[]我可以显示第一个列标题，但是如何显示所有三个字幕和页脚？有一些关于使用节头的苹果文档这里，但在多节头和页脚上却没有。

private var columns: [GridItem] = [
        GridItem(.flexible()),
        GridItem(.flexible()),
        GridItem(.flexible())
    ]
    var body: some View {

    GeometryReader { g in
        ScrollView {
            VStack (alignment: .leading) {

   ShowTitle()

   ShowSubTitle()

       LazyVGrid(
           columns: columns,
           alignment: .leading,
           spacing: 10,  // vertical spacing
           pinnedViews: [.sectionHeaders, .sectionFooters]
       ) {

           Section(header: Text("Subtitle A")
                 .font(.headline)) {
               ForEach(0..<self.categories.catItem.count, id: \.self) { index in
                  ShowRow(index: index)
                }
             }
          }

Answer 1

我模仿了苹果在用延迟堆栈视图对数据进行分组的例子。诀窍是将LazyVStack放在ForEach中，然后按如下方式遍历每一节：

struct LazyVGridSectioned: View {
    let sections = [
        ColorData(color: .red, name: "Reds", footerInfo: "Red Footer Info"),
        ColorData(color: .green, name: "Greens", footerInfo: "Green Footer Info"),
        ColorData(color: .blue, name: "Blues", footerInfo: "Blue Footer Info")
    ]
    
    var body: some View {
        ScrollView {
            HStack {
                ForEach(sections) { section in
                    LazyVStack(spacing: 1, pinnedViews: [.sectionHeaders, .sectionFooters]) {
                        Section(header: SectionHeaderView(colorData: section), footer: SectionFooterView(colorData: section)) {
                            ForEach(section.variations) { variation in
                                section.color
                                    .brightness(variation.brightness)
                                    .frame(height: 20)
                            }
                        }
                    }
                }
            }
        }
    }
}
    

struct SectionHeaderView: View {
    var colorData: ColorData

    var body: some View {
        HStack {
            Spacer()
            Text("Header for \(colorData.name)")
                .font(.headline)
                .foregroundColor(colorData.color)
            Spacer()
        }
        .padding()
        .background(Color.primary
                        .colorInvert()
                        .opacity(0.75))
    }
}

struct SectionFooterView: View {
    var colorData: ColorData

    var body: some View {
        HStack {
            Spacer()
            Text(colorData.footerInfo)
                .font(.headline)
                .foregroundColor(colorData.color)
            Spacer()
        }
        .padding()
        .background(Color.primary
                        .colorInvert()
                        .opacity(0.75))
    }
}
    

struct ColorData: Identifiable {
    let id = UUID()
    let name: String
    let footerInfo: String // Add parameter in ColorData
    let color: Color
    let variations: [ShadeData]

    struct ShadeData: Identifiable {
        let id = UUID()
        var brightness: Double
    }

    // Add it to the init as well
    init(color: Color, name: String, footerInfo: String) {
        self.name = name
        self.color = color
        self.footerInfo = footerInfo // Assign it here
        self.variations = stride(from: 0.0, to: 0.5, by: 0.1)
            .map { ShadeData(brightness: $0) }
    }
}