https://github.com/krishkumar/flowlayout

A flexible flow layout Swift library
https://github.com/krishkumar/flowlayout

flexible-layout flowlayout hstack ios swift swift-package-manager swiftui

Last synced: 3 days ago
JSON representation

A flexible flow layout Swift library

• Host: GitHub
• URL: https://github.com/krishkumar/flowlayout
• Owner: krishkumar
• Created: 2025-02-12T20:07:51.000Z (8 days ago)
• Default Branch: main
• Last Pushed: 2025-02-12T20:13:02.000Z (8 days ago)
• Last Synced: 2025-02-12T21:25:13.619Z (8 days ago)
• Topics: flexible-layout, flowlayout, hstack, ios, swift, swift-package-manager, swiftui
• Language: Swift
• Homepage:
• Size: 105 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# FlowLayout

![FlowLayout Diagram](flowlayout.jpg)

A Swift library that provides a flexible flow layout. Arrange SwiftUI subviews in a "flow" style, wrapping items to the next line when necessary — similar to how text is arranged in a paragraph.

## Features

- **Dynamic Wrapping**: Subviews automatically wrap to a new row when there’s no more room in the current row.

- **Alignment Options**: Supports different SwiftUI alignment options like leading, trailing, center, top, and bottom alignment.

- **Adjustable Spacing**: Configurable horizontal and vertical spacing between subviews.

- **Fit Content**: Optionally fit the layout’s width to the total width of the subviews, or use the parent's width as proposed by SwiftUI.

## Usage

1. Add FlowLayout as a dependency in your Swift Package Manager project:

   ```swift

   .package(

       name: "FlowLayout",

       url: "https://github.com/krishkumar/FlowLayout.git",

       .upToNextMajor(from: "1.0.0")

   )

   ```

2. Import the `FlowLayout` module in your Swift code:

   ```swift

   import FlowLayout

   ```

3. Use `FlowLayout` in your SwiftUI code:

   ```swift

    struct ContentView: View {

    	@State var allCities = ["Dallas", "Austin", "New York", "Singapore", "London", "Houston", "Washington DC", "San Francisco"]

    	var body: some View {

    		HStack {

    			FlowLayout {

    				ForEach(allCities, id: \.self) { city in

    					Text("\(city)")

    						.padding()

    						.background(Capsule().fill(.blue))

    				}

    			}

    		}

    	}

	}

    ```

## Contributing

Contributions are welcome! Feel free to open issues and submit pull requests.

## Implementation

FlowLayout uses SwiftUI’s PreferenceKeys to measure child views, making it easier to adapt dynamically to changes in content size. Combined with SwiftUI’s Layout protocol — flexibly arrange subviews that automatically reflows as needed.

## License

This project is licensed under the MIT License. See [LICENSE](LICENSE) for details.