swiftui-wrapping-stack's Introduction

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

Parameter name	Description
`alignment`	horizontal and vertical alignment. `.center` is used by default. Vertical alignment is applied to every row
`horizontalSpacing`	horizontal spacing between elements
`verticalSpacing`	vertical spacing between the lines

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.

Recommend Projects