SwiftUI views that arrange their children in a flow layout.

Ciaran O'Brien

Last update: Jan 5, 2023

Related tags

Layout SwiftUIFlow

Overview

SwiftUI Flow

SwiftUI views that arrange their children in a flow layout.

HFlow

A view that arranges its children in a horizontal flow.

Usage

ScrollView(.horizontal) {
    HFlow {
        //Flow content
    }
}

Parameters

horizontalSpacing: The distance between adjacent columns of subviews, or nil if you want the flow to choose a default distance for each pair of columns.
verticalSpacing: The distance between vertically adjacent subviews, or nil if you want the flow to choose a default distance for each pair of subviews.
content: A view builder that creates the content of this flow.

VFlow

A view that arranges its children in a vertical flow.

Usage

ScrollView(.vertical) {
    VFlow {
        //Flow content
    }
}

Parameters

horizontalSpacing: The distance between horizontally adjacent subviews, or nil if you want the flow to choose a default distance for each pair of subviews.
verticalSpacing: The distance between adjacent rows of subviews, or nil if you want the flow to choose a default distance for each pair of rows.
content: A view builder that creates the content of this flow.

Requirements

iOS 14.0+, macOS 11.0+, tvOS 14.0+ or watchOS 7.0+
Xcode 12.0+

Installation

Install with Swift Package Manager.
Import SwiftUIFlow to start using.

Contact

@ciaranrobrien on Twitter.

You might also like...

Swift-picker-views - inline single and multi picker views for UIKit. Without tableview! Easy and simple

swift-picker-views Inline single and multiple picker views for UIKit. No tablevi

2 Jan 31, 2022

A Swift utility to make updating table views/collection views trivially easy and reliable.

ArrayDiff An efficient Swift utility to compute the difference between two arrays. Get the removedIndexes and insertedIndexes and pass them directly a

100 Jun 5, 2022

Fast Swift Views layouting without auto layout. No magic, pure code, full control and blazing fast. Concise syntax, intuitive, readable & chainable. [iOS/macOS/tvOS/CALayer]

Extremely Fast views layouting without auto layout. No magic, pure code, full control and blazing fast. Concise syntax, intuitive, readable & chainabl

2.1k Dec 22, 2022

Fast Swift Views layouting without auto layout. No magic, pure code, full control and blazing fast

Fast Swift Views layouting without auto layout. No magic, pure code, full control and blazing fast. Concise syntax, intuitive, readable & chainable. [iOS/macOS/tvOS/CALayer]

2.1k Jan 2, 2023

Auto Layout (and manual layout) in one line.

Auto Layout (and manual layout) in one line. Quick Look view.bb.centerX().below(view2).size(100) It’s equivalent to iOS 9 API: view.centerXAnchor.cons

74 Oct 19, 2022

Auto Layout made easy with the Custom Layout.

Auto Layout made easy with the Custom Layout. Getting started CocoaPods CocoaPods is a dependency manager for Cocoa projects. You can install it with

1 Jan 16, 2022

AppStoreClone - Understanding the complex layout of app store using UICompositional layout in swift

AppStoreClone Understanding the complex layout of app store using UICompositiona

8 Dec 28, 2022

A mental health app designed to help users track their emotions with short, tweet-like journals.

Objective The purpose of this project is to create a mental health app where users will input a short journal each day that is no longer than a tweet

0 Dec 25, 2021

Apple provides us two ways to use UIKit views in SwiftUI

RepresentableKit Apple provides us two ways to use UIKit views in SwiftUI: UIVie

43 Dec 26, 2022

Comments

Fails to revert to portrait "arrangement" when device (or simulator) is reoriented to portrait.

The view correctly "rearranges" when moving from a device's portrait orientation, but fails to revert when moving the device back from landscape to portrait. The view "sticks" and is wider than the screen.

This is my code which recreates the above bug. Am I doing something wrong?

struct ContentView: View {
    
    var words: [String] = [
        "Sed", "perspiciatis", "unde", "omnis", "iste", "natus", "error", "accusantium", "doloremque", "laudantium,", "totam", "rem", "aperiam,", "eaque", "ipsa", "quae", "ab", "illo", "inventore", "veritatis", "et", "quasi", "architecto", "beatae", "vitae", "dicta", "sunt", "explicabo", "Nemo", "enim", "ipsam", "voluptatem", "aspernatur", "odit", "fugit,", "consequuntur", "magni", "eos", "qui", "ratione", "sequi", "nesciunt", "Neque", "porro", "quisquam", "est,", "dolorem", "ipsum", "quia", "dolor", "sit", "amet,", "consectetur,", "adipisci", "velit,", "sed", "non", "numquam", "eius", "modi", "tempora", "incidunt", "labore", "magnam", "aliquam", "quaerat", "ad", "minima", "veniam,", "quis", "nostrum", "exercitationem", "ullam", "corporis", "suscipit", "laboriosam,", "nisi", "ut", "aliquid", "ex", "commodi", "consequatur?", "Quis", "autem", "vel", "iure", "in", "ea", "quam", "nihil", "molestiae", "consequatur", "illum", "eum", "fugiat", "quo", "voluptas", "pariatur", "At", "vero", "accusamus", "iusto", "odio", "dignissimos", "ducimus", "blanditiis", "praesentium", "voluptatum", "deleniti", "atque", "corrupti", "quos", "dolores", "quas", "molestias", "excepturi", "occaecati", "cupiditate", "provident,", "similique", "mollitia", "animi,", "irure", "reprehenderit", "voluptate", "velit", "esse", "cillum", "dolore", "eu", "nulla", "Excepteur", "sint", "occaecat", "cupidatat", "proident", "culpa", "officia", "deserunt", "mollit", "anim", "id", "est", "laborum"
       ]
    
    var body: some View {
        ScrollView (.vertical) {
            VFlow {
                ForEach (words, id: \.self) { word in
                    Text(word)
                        .padding(.vertical, 2)
                        .padding(.horizontal, 6)
                        .background(Color.mint)
                        .cornerRadius(7.5)
                }
            }
        }
        .padding(.horizontal)
    }
}

opened by Rillieux 2

SwiftUI views that arrange their children in a flow layout.

Related tags

Overview

SwiftUI Flow

HFlow

Usage

Parameters

VFlow

Usage

Parameters

Requirements

Installation

Contact

You might also like...

Swift-picker-views - inline single and multi picker views for UIKit. Without tableview! Easy and simple

A Swift utility to make updating table views/collection views trivially easy and reliable.

Fast Swift Views layouting without auto layout. No magic, pure code, full control and blazing fast. Concise syntax, intuitive, readable & chainable. [iOS/macOS/tvOS/CALayer]

Fast Swift Views layouting without auto layout. No magic, pure code, full control and blazing fast

Auto Layout (and manual layout) in one line.

Auto Layout made easy with the Custom Layout.

AppStoreClone - Understanding the complex layout of app store using UICompositional layout in swift

A mental health app designed to help users track their emotions with short, tweet-like journals.

Apple provides us two ways to use UIKit views in SwiftUI

Comments

Fails to revert to portrait "arrangement" when device (or simulator) is reoriented to portrait.

Owner

Ciaran O'Brien

Arrange views in your app’s interface using layout tools that SwiftUI provides.

🥳 Give birthday celebration message to foster children 🎂

Flow layout / tag cloud / collection view in SwiftUI.

Allows users to pull in new song releases from their favorite artists and provides users with important metrics like their top tracks, top artists, and recently played tracks, queryable by time range.

A flexible collection view with proper horizontal layout flow

Pintrest flow layout UICollectionView

DG Carousel Flow Layout

Expose layout margins and readable content width to SwiftUI's Views

Reframing SwiftUI Views. A collection of tools to help with layout.

A custom layout built on top of SwiftUI's Layout API that lays elements out in multiple lines. Similar to flex-wrap in CSS, CollectionViewFlowLayout.