WrappingHStack - SwiftGit

SwiftUI

WrappingHStack

August 18, 2025

WrappingHStack is a UI Element that works in a very similar way to HStack, but automatically positions overflowing elements on next lines.

Example


                                              
                                                WrappingHStack {

Text(“WrappingHStack”)

.padding()

.font(.title)

.border(Color.black)
Text(“can handle different element types”)
Image(systemName: “scribble”)

.font(.title)

.frame(width: 200, height: 20)

.background(Color.purple)
Text(“and loop”)

.bold()
WrappingHStack(1…20, id:\.self) {

Text(“Item: \($0)”)

.padding(3)

.background(Rectangle().stroke())

}.frame(minWidth: 250)

}

.padding()

.border(Color.black)

Installation

Requirements iOS 13+

Swift Package Manager

In Xcode, open your project and navigate to File → Swift Packages → Add Package Dependency.
Paste the repository URL (https://github.com/dkk/WrappingHStack) and click Next.
For Rules, select version.
Click Finish.

Swift Package


                                              
                                                .package(url: “https://github.com/dkk/WrappingHStack”, .upToNextMajor(from: “2.0.0”))

Cocoapods

Simply add the following line to your Podfile:


                                              
                                                pod ‘WrappingHStack’

Usage

Import the WrappingHStack package to your view:


                                              
                                                import WrappingHStack

use it like you would use HStack for single elements:


                                              
                                                WrappingHStack {

/* some views */

NewLine() // Optional: Use NewLine to force the next element to be placed in a next line

/* some more views */

}

or like a ForEach to loop over items:


                                              
                                                WrappingHStack(1…30, id:\.self) {

Text(“Item: \($0)”)

}

Item positioning

You control the position of the items by using the parameter alignment, which sets the HorizontalAlignment of the items. I.e. leading, trailing or centered.

For even more convenience and flexibility, WrappingHSTack offers the parameter spacing, that defines how the spacing will be calculated. It can be one of the following types:

.constant: for fixed spacing, each line starts with an item and the horizontal separation between any 2 items is the given value.
.dynamic: to have the items fill the width of the WrappingHSTack. You can pass a minimal spacing.
.dynamicIncludingBorders to fill the full width with equal spacing between items and from the items to the border. You can pass a minimal spacing.

GitHub

View Github

YOU MIGHT ALSO LIKE...

August 18, 2025
SwiftUI

SVGView

Overview The goal of this project is to bring the full power of SVG to Apple platforms. Our framework can ...

August 12, 2025
SwiftUI

SwiftSpeech

Recognize your user's voice elegantly without having to figure out authorization and audio engines. SwiftSpeech Examples Features Installation Getting Started ...