StackWrapper helps you easily and efficiently arrange your desired elements using a flexible layout. This component dynamically adjusts in height and width based on the elements and the device’s screen size. It also allows you to use various properties to customize your design needs.
- Flexible Horizontal Wrapping
- Customizable Spacing
- Alignment Control
- Fixed Size Option
- Animation Support
- Layout Calculation
- Responsive to Screen Size
| Parameter | Type | Default Value | Description |
|---|---|---|---|
items | [T] | N/A | Required: An array of items conforming to Hashable. |
hSpacing | CGFloat | 10 | Horizontal spacing between items. |
vSpacing | CGFloat | 10 | Vertical spacing between rows. |
alignment | HorizontalAlignment | .leading | The alignment of items horizontally. |
fixedSize | Bool | true | Whether each item should have a fixed size or not. |
animation | Animation? | nil | Optional animation when the container height changed. |
First, import StackWrapper package
import StackWrapperstructMySkills:View{@Statevarskills:[String]=["Swift","SwiftUI","UIKit","Kotlin","JavaScript","HTML","CSS","React","Node.js","Git","TypeScript","MongoDB","Express.js","REST APIs"]varbody:someView{VStack{Hwrapper(items: skills){skill inText(skill).padding(12).background(.yellow).clipShape(RoundedRectangle(cornerRadius:12))}}.padding()}}
Hwrapper(items: skills, vSpacing:10, hSpacing:20, alignment:.center, fixedSize:true){ skill inText(skill).padding(12).background(.yellow).clipShape(RoundedRectangle(cornerRadius:12))}
Smooth transitions when the container’s height increases or decreases
VStack{Hwrapper(items: skills, animation:.easeIn){ skill inText(skill).padding(12).background(.yellow).clipShape(RoundedRectangle(cornerRadius:12))}Button("Delete Skill"){
skills.removeLast()}.buttonStyle(.borderedProminent)}- Open your project.
- Go to File → Add Package Dependencies.
- Enter URL: https://github.com/Desp0o/StackWrapper.git
- Click Add Package.
