ViewThatFits support

[Louis-PAGNIER]

Hello,
Is ViewThatFits on the roadmap for SkipUI ?
For me it is an important element to support larger/smaller layouts.
Also, I don't know if it would be difficult to implement and how it can be done.

[aabewhite]

Can you describe one or two concrete examples of how you'd like to use it? That always helps us evaluate the scope.

[Louis-PAGNIER]

Yes of course !
A first use that I have is when I want some content to be displayed vertically if the horizontal space is limited:

ViewThatFits(in: .horizontal) {
    ScrollView(.horizontal) {
        HStack {
           // many images or anything else   
        }
    }.frame(minWidth: 800)

    ScrollView(.vertical) {
        VStack {
            // same images or content
        }
    }
}

An other use case is when I have multiple views, with different level of details (e.g. presenting an item).

ViewThatFits {
    AllDetailsView(item: item)  // probably iPad landscape 

    ManyDetailsView(item: item)  // probably iPad portrait

    OnlyEssentialDetailsView(item: item)  // probably iPhone
}

[isenberg]

With Skip-Fuse I used this alternatives:

struct DynamicStack<Content: View>: View {
        var horizontalAlignment = HorizontalAlignment.center
        var verticalAlignment = VerticalAlignment.center
        var spacing: CGFloat?
        @ViewBuilder var content: () -> Content
        @Environment(\.horizontalSizeClass) var horizontalSizeClass
        @Environment(\.verticalSizeClass) var verticalSizeClass

        var body: some View {
                if horizontalSizeClass == .compact && verticalSizeClass == .regular {
                        vStack
                } else if horizontalSizeClass == .regular && verticalSizeClass == .compact {
                        hStack
                } else if horizontalSizeClass == .regular && verticalSizeClass == .regular {
                        vStack
                } else {
                        hStack
                }
        }
}

private extension DynamicStack {
        var hStack: some View {
                HStack(
                        alignment: verticalAlignment,
                        spacing: spacing,
                        content: content
                )
        }
        var vStack: some View {
                VStack(
                        alignment: horizontalAlignment,
                        spacing: spacing,
                        content: content
                )
        }
}

But on Skip-Lite above doesn't work and I tried now ViewThatFits as I had to switch to Skip-Lite for other reasons.

On Skip-Lite ViewThatFits appears to work in my app within a .sheet() but fails to display part of the view content in the main app View. There only one of the views inside ViewThatFits { } is displayed.

[isenberg]

Now I see fix skiptools/skip-fuse-ui#74 in Skip-Fuse and skiptools/skip-ui#277 in Skip-Lite . The Fuse part appears to be released already but for the Lite part I don't see it in the main branch yet, so will try the dev branch now...

[isenberg]

Correction: It's released with Lite 1.44.1, I looked in the wrong repository. It's here: https://github.com/skiptools/skip-ui/blob/main/Sources/SkipUI/SkipUI/Containers/ViewThatFits.swift

Now checking if I can create a reproducer for the issue I see in lite with it...

[isenberg]

I have tried ViewThatFits now in my existing iOS app: On iOS it works fine, but on Skip-Lite which I have to use for others reasons as some graphical features for my app are missing in Skip-Fuse, it doesn't work completely. Simple Views with ViewThatFits work, but my more complex main screen fails as all except the last child element in the two alternatives are not displayed.

Now using this as workaround with skip-lite:

struct MainView: View {

var body: some View {

VStack {
  GeometryReader { screenGeometry in
    if horizontalSizeClass == .regular && verticalSizeClass == .compact || horizontalSizeClass == .regular && verticalSizeClass == .regular {
      // landscape phone or landscape/portrait tablet
      HStack {
        MainSectionViewBody
        VStack {
          SubSectionViewBody2
          SubSectionViewBody1
        }
      }
    } else {
      // portrait phone
      VStack {
        MainSectionViewBody
        HStack {
          SubSectionViewBody1
          SubSectionViewBody2
        }
      }
    }
  }
}

} //end of MainView body

var MainSectionViewBody: some View {
     VStack { ... }
}

var SubSectionViewBody1: some View {
     VStack { ... }
}

var SubSectionViewBody2: some View {
     VStack { ... }
}

} // end of MainView

[dfabulich]

Could you file a separate issue with steps to reproduce?