Now let’s swap the .frame and .border order and note what happens. This demonstrates the order of operations is important when chaining layout modifiers.
To add actions, you can of course just put buttons in your cells like example #2. But there is also a way to detect a tap on the entire cell. Note we add a background to detect taps in the empty areas outside the text.
Update July 2020 - latest SwiftUI now has built-in components to do this, which should be used instead.
FlowStack
FlowStack is a SwiftUI component for laying out content in a grid.
Requirements
Xcode 11 beta on MacOS 10.14 or 10.15
Installation
In Xcode, choose File -> Swift Packages -> Add Package Dependency and enter this repo’s URL.
Usage
FlowStack(columns, numItems, alignment) { index, colWidth in }
The alignment of any trailing columns in the last row.
Callback parameters
Examples
1) Simple
The simplest possible example:
You should always add
.frame(width: colWidth)
to the immediate child ofFlowStack
.2) Displaying Data
Padding/Borders/Actions
Let’s draw a border on our cells to visualize some concepts:
Now let’s swap the
.frame
and.border
order and note what happens. This demonstrates the order of operations is important when chaining layout modifiers.Now let’s swap the order back and add some padding:
To add actions, you can of course just put buttons in your cells like example #2. But there is also a way to detect a tap on the entire cell. Note we add a background to detect taps in the empty areas outside the text.
Example with images
Here’s an example with images. LoadableImageView is from here.
Evenly spaced grid
Feedback
Please file a github issue if you’re having trouble or spot a bug.