You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+64-12Lines changed: 64 additions & 12 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -14,8 +14,9 @@ A collection of SwiftUI tools to help with layout.
14
14
- SwiftUI [`Layouts`](#layouts) like [`HFlowLayout`](#hflowlayout), [`VFlowLayout`](#vflowlayout), [`VMasonryLayout`](#vmasonrylayout), [`HMasonryLayout`](#hmasonrylayout), and [`LayoutThatFits`](#layoutthatfits)
15
15
-[`AutoRotatingView`](#autorotatingview) to set allowable orientations for a view.
16
16
-[Frame Adjustment](#frame-adjustment) tools like [`WidthReader`](#widthreader), [`HeightReader`](#heightreader), [`onSizeChange(perform:)`](#onsizechangeperform), [`keyboardHeight`](#keyboardHeight), [`.relativePadding`](#relativepaddingedges-lengthfactor), [`ScaledView`](#scaledview) and [`OverlappingImage`](#overlappingimage).
17
+
-[unclippedTextRenderer](#unclippedtextrenderer) for fixing clipped `Text`.
17
18
-[`SmartScrollView`](#smartscrollview) with optional scrolling, a content-fitable frame, and live edge inset values.
18
-
-[`TwoSidedView`](#twosidedview) and [`FlippingView`](#flippingview) for making flippable views with a different view on the back side.
19
+
-[`FlippingView`](#flippingview) and [`rotation3DEffect(back:)`](#rotation3deffectback) for making flippable views with a different view on the back side.
19
20
-[`TabMenu`](#tabmenu), a customizable iOS tab menu with `onReselect` and `onDoubleTap` functions.
SwiftUI `Text` has a clipping frame that cannot be adjusted and will occasionally clip the rendered text. This modifier applies an `UnclippedTextRenderer` that removes this clipping frame.
341
+
342
+
This modifier is unnecessary if another text renderer is used as all text renderers will remove the clipping frame.
- If placed directly inside a NavigationView with a resizing header, this view may behave strangely when scrolling. To avoid this add 1 point of padding just inside the NavigationView.
353
368
- If the available space for this view grows for any reason other than screen rotation, this view might not grow to fill the space.
An alternative to rotation3DEffect that provides a closure for views that will be seen on the back side of this view.
370
+
## FlippingView
371
+
372
+
### FlippingView
373
+
A two-sided view that can be flipped by tapping or swiping.
374
+
375
+
The axis, anchor, perspective, drag distance to flip, animation for tap to flip and more can all be customized.
376
+
377
+
For visionOS a slightly different initializer might be needed and the flips will occur in 3d space. If instead you want a perspective effect on a flat view you can use `PerspectiveFlippingView`
Renders a view’s content as if it’s rotated in three dimensions around the specified axis with a closure containing a different view to show on the back.
358
390
359
391
The example below is a view with two sides. One blue side that says "Front" and a red side on the back that says "Back". Changing the angle will show each side as it becomes visible.
Rotates this view’s rendered output in three dimensions around the given axis of rotation with a closure containing a different view on the back. A minimum thickness that offsets the two views is required to ensure the side facing the user renders on top.
403
+
```swift
404
+
Color.blue.overlay(Text("Front"))
405
+
.rotation3DEffect(angle) {
406
+
Color.red.overlay(Text("Back"))
407
+
}
408
+
```
370
409
371
-
The axis, anchor, perspective, drag distance to flip, animation for tap to flip and more can all be customized.
Renders a view’s content as if it’s rotated in three dimensions around the specified axis with a closure containing a different view to show on the back. The view is not actually rotated in 3d space.
372
413
373
414
```swift
374
-
FlippingView(flips: $flips) {
375
-
Color.blue.overlay(Text("Up"))
376
-
} back: {
377
-
Color.red.overlay(Text("Back"))
378
-
}
415
+
Color.blue.overlay(Text("Front"))
416
+
.rotation3DEffect(angle) {
417
+
Color.red.overlay(Text("Back"))
418
+
}
379
419
```
380
420
381
421
## TabMenu
@@ -485,6 +525,7 @@ If you like the SwiftUI `Layout` protocol but you need to target an older OS tha
485
525
An `FULayout` will work in the same way as a SwiftUI `Layout`. The main difference is it will require a `maxWidth` or `maxHeight` parameter when initializing in order to know the available space. This can be provided by `GeometryReader` or with [`WidthReader`](#widthreader) or [`HeightReader`](#heightreader) from this package.
An `FULayout` uses `callAsFunction()` with a view builder so you can use it just like a SwiftUI `Layout`.
489
530
490
531
```swift
@@ -497,6 +538,7 @@ VFlow(maxWidth: 200) {
497
538
*Caution: This method uses Apple's private protocol `_VariadicView` under the hood. There is a small risk Apple could change the implementation so if this concerns you, use method 2 below.*
The [`FULayout`](#fulayout) equivalent of [`HFlowLayout`](#hflowlayout).
512
555
513
556
A FrameUp `FULayout` that arranges views in horizontal rows flowing from one to the next with adjustable horizontal and vertical spacing and support for horiztonal and vertical alignment including a justified alignment that will space elements in completed rows evenly.
The [`FULayout`](#fulayout) equivalent of [`VFlowLayout`](#vflowlayout).
529
573
530
574
A FrameUp `FULayout` that arranges views in vertical columns flowing from one to the next with adjustable horizontal and vertical spacing and support for horiztonal and vertical alignment including a justified alignment that will space elements in completed columns evenly.
The [`FULayout`](#fulayout) equivalent of [`LayoutThatFits`](#layoutthatfits).
578
625
579
626
An `FULayout` that picks the first provided layout that will fit the content in the provided maxWidth, maxHeight, or both. This is most helpful when switching between `HStackFULayout` and `VStackFULayout` as the content only needs to be provided once and will even animate when the stack changes.
The [`FULayout`](#fulayout) equivalent of SwiftUI `ViewThatFits`.
597
645
598
646
An `FULayout` that presents the first view that fits the provided maxWidth, maxHeight, or both depending on which parameters are used.
@@ -618,15 +666,19 @@ WidthReader { width in
618
666
Alternative stack layouts that can be wrapped in [`AnyFULayout`](#anyfulayout) and then toggled between with animation. Useful when you want to toggle between VStack and HStack based on available space.
0 commit comments