SwiftUI WrappingStack

A SwiftUI Views for wrapping HStack elements into multiple lines.

List of supported views

• WrappingHStack – provides HStack that supports line wrapping

How to use

Step 1

Add a dependency using Swift Package Manager to your project: https://github.com/diniska/swiftui-wrapping-stack

Step 2

Import the dependency

import WrappingStack

Step 3

Replace HStack with WrappingHStack in your view structure. It is compatible with ForEach.

struct MyView: View {

    let elements = ["Cat ?", "Dog ?", "Sun ?", "Moon ?", "Tree ?"]
    
    var body: some View {
        WrappingHStack(id: \.self) { // use the same id is in the `ForEach` below
            ForEach(elements, id: \.self) { element in
                Text(element)
                    .padding()
                    .background(Color.gray)
                    .cornerRadius(6)
            }
        }
        .frame(width: 300) // limiting the width for demo purpose. This line is not needed in real code
    }
    
}

The result of the code above:

Customization

Customize appearance using the next parameters. All the default SwiftUI modifiers can be applied as well.

WrappingHStack parameters

Performance considerations

The code written in a way to cache the elements representing views sizes, it doesn’t re-calculate the size for different views with the same id.

• huge numbers of elements are not recommended, although the same applies to HStack where LazyHStack is a better alternative for the long rows. If you have a large number of elements – double-check the memory and performance on a real device
• it is pretty good in terms of CPU consumption as every element calculates its size only once.

GitHub

https://github.com/diniska/swiftui-wrapping-stack