Feature Request: Horizontal Scaling

[Mcrich23]

Please add horizontal scaling, it would look so good!

Right now, it does this and does not look 'so good'

https://github.com/user-attachments/assets/ee97e398-11ee-4cd0-a28c-a20b818d80fa

[ksemianov]

Hi, @Mcrich23! Thanks for exploring the package and sharing your feedback.

If I understand correctly, you’re looking for a layout that dynamically adjusts to horizontal space, potentially creating a grid-like structure. This can actually be achieved natively in SwiftUI using LazyVGrid, without requiring any additional libraries. Below is an example implementation to demonstrate how this might look. The accompanying GIF shows the resulting behavior.

If this aligns with what you were aiming for, it may fall outside the scope of this library, as SwiftUI already provides a built-in solution. However, if I misunderstood your request or you’re looking for something more specific that can’t be achieved this way, could you share a sketch or further clarify your idea?

import SwiftUI

struct Participant: Identifiable {
    var id: UUID = UUID()
    var name: String
    var color: Color
    var score: Int
}

struct ParticipantView: View {
    @Binding var data: Participant

    var body: some View {
        ZStack(alignment: .leading) {
            RoundedRectangle(cornerRadius: 8)
                .fill(Color.gray)

            VStack(alignment: .leading, spacing: 8) {
                Text(data.name)

                Text("\(data.score)")

                ColorPicker("Color", selection: $data.color)
            }
            .padding()
        }
    }
}

struct ContentView: View {
    @State var participants: [Participant] = [
        .init(name: "Charlie", color: .red, score: 1),
        .init(name: "Colin", color: .blue, score: 3),
    ]

    var body: some View {
        ScrollView(.vertical) {
            LazyVGrid(columns: columns, spacing: 16) {
                ForEach($participants) { participant in
                    ParticipantView(data: participant)
                }
            }
            .padding()
        }
    }

    private let columns: [GridItem] = {
        return [GridItem(.adaptive(minimum: 200))]
    }()
}