swift中的自定义网格

Question

我需要一些帮助来构建这个 UI。我想要的是制作一个这个网格1

到目前为止，我尝试过的是这样，但是 Sets、reps、rest 之间的填充。

struct ProgramContainer: View {
var weight: String = "Weight"
@State var value = ""

private var columns: [GridItem] = [
    GridItem(.flexible(minimum: 0, maximum: 40), spacing: 40),
    GridItem(.flexible(minimum: 1, maximum: 40), spacing: 40),
    GridItem(.flexible(minimum: 1, maximum: 40), spacing: 40),
    GridItem(.flexible(minimum: 1, maximum: 40), spacing: 40)
]

var body: some View {
    ScrollView {
        VStack(alignment: .leading) {
            Text("name")
                .font(.title3).bold()
            Divider()
            LazyVGrid(
                columns: columns,
                alignment: .leading,
                spacing: 20,
                pinnedViews: [.sectionHeaders, .sectionFooters]
            ) {
                Section {
                    ForEach(0...11, id: \.self) {index in
                        TextField("0", text: $value)
                    }
                } header: {
                    HStack(spacing: 40, content: {
                        Text(weight)
                        Text("Reps")
                        Text("Sets")
                        Text("Rest")
                    })
                }
            }
        }
    }
}

}

它看起来像这样：

Answer 1

我发现如果您使用具有相同列数 (GridItems) 的 LazyVGrid 作为 Section 标题，则更容易对齐标题和项目。

锻炼项目：

struct Workout: Identifiable {
let id = UUID()
let weight: Int
let sets: Int
let reps: Int
let rest: Int

}

页眉视图：

struct WorkoutHeaderView: View {
private let labels = ["Weight", "Set", "Reps", "Rest"]
private let gridItems: [GridItem] = [GridItem(), GridItem(), GridItem(), GridItem()]

var body: some View {
    LazyVGrid(columns: gridItems, spacing: 10) {
        ForEach(labels, id: \.self) { label in
            Text(label)
        }
    }
}

}

程序容器：

struct ProgramContainer: View {
@State private var workoutData: [Workout] = [
    .init(weight: 100, sets: 3, reps: 12, rest: 1),
    .init(weight: 120, sets: 3, reps: 10, rest: 2)
]
private let gridItems: [GridItem] = [GridItem(), GridItem(), GridItem(), GridItem()]

var body: some View {
    VStack(spacing: 20) {
        VStack(alignment: .leading) {
            Text("Label")
            Divider()
        }
        
        LazyVGrid(columns: gridItems, spacing: 10) {
            Section(header: WorkoutHeaderView()) {
                ForEach(workoutData) { value in
                    Text("\(value.weight)")
                    Text("\(value.sets)")
                    Text("\(value.reps)")
                    Text("\(value.rest)")
                }
            }
        }
        
        Spacer()
            .frame(maxHeight: 150)
    }
    .padding()
    .background(
        RoundedRectangle(cornerRadius: 20)
            .foregroundColor(.blue)
            .opacity(0.5)
    )
    .padding()
}

}

Layout Result