Flow

public struct Flow : Element

Element which lays out children horizontally, wrapping to another row when there is not enough space.

You may control the layout of each row within the flow layout, by providing a LineAlignment, which controls the horizontal alignment of content within a row when it is smaller than its container, and via ItemAlignment, which controls the vertical alignment of shorter elements within a row.

Flow(itemSpacing: 10, lineSpacing: 10) {
    OnboardingPill("Food / drink")
    OnboardingPill("Retail goods").flowChild(key: "aKey")
    OnboardingPill("Grocery / gourmet / alcohol")
    OnboardingPill("Beauty / wellness bookings")
    OnboardingPill("Healthcare services")
    OnboardingPill("Something else")
}

Below is a diagram showing a simple example of a Flow layout.

┌─────────────────────────────────────┐
│ ┌─────────┐┌─────────┐┌────────────┐│
│ │    1    ││    2    ││     3      ││
│ └─────────┘└─────────┘└────────────┘│
│ ┌───────┐┌─────┐┌───────────┐       │
│ │   4   ││  5  ││     6     │       │
│ └───────┘└─────┘└───────────┘       │
└─────────────────────────────────────┘

lineAlignment
How to align each row when there is extra horizontal space.
Declaration
Swift

public var lineAlignment: LineAlignment
lineSpacing
Space between lines in the layout.
Declaration
Swift

public var lineSpacing: CGFloat
itemAlignment
How to align items in a line when there is extra vertical space.
Declaration
Swift

public var itemAlignment: ItemAlignment
itemSpacing
Space between items within a line.
Declaration
Swift

public var itemSpacing: CGFloat
children
The child elements of the flow layout to be laid out.
Declaration
Swift

public var children: [Child]


                    
                    
                    init(lineAlignment:lineSpacing:itemAlignment:itemSpacing:_:)

Creates a new flow layout with the provided parameters.

Declaration

Swift

public init(
    lineAlignment: LineAlignment = .leading,
    lineSpacing: CGFloat = 0,
    itemAlignment: ItemAlignment = .center,
    itemSpacing: CGFloat = 0,
    @ElementBuilder<Flow.Child> _ children: () -> [Flow.Child]
)

Element


                    
                    
                    content

Declaration

Swift

public var content: ElementContent { get }


                    
                    
                    backingViewDescription(with:)

Declaration

Swift

public func backingViewDescription(with context: ViewDescriptionContext) -> ViewDescription?

LineAlignment
How to horizontally align the line when there is extra space.
See more
Declaration
Swift

public enum LineAlignment : CaseIterable
ItemAlignment
How to vertically align items which there is extra space.
See more
Declaration
Swift

public enum ItemAlignment : CaseIterable
Child
A child placed within the flow layout.
See more
Declaration
Swift

public struct Child : ElementBuilderChild