Custom Scrollview in SwiftUI

Question

I have a piece of code that looks like this in my ContentView and I'd like to not repeat the ScrollView's modifiers unnecessarily.

if variable == false {
    ScrollView {
        // Code here
    }
    .navigationBarTitleDisplayMode(.inline)
    .toolbar() {
        // Code here
    }
} else {
    ScrollView(.horizontal, showsIndicators: false) {
        // Code here
    }
    .navigationBarTitleDisplayMode(.inline)
    .toolbar() {
        // Code here
    }

So I tried to do this instead:

ScrollView(variable ? .horizontal, showsIndicators: false : nil) {
    // Code here
}
.navigationBarTitleDisplayMode(.inline)
.toolbar() {
    // Code here
}

But it doesn't work. How do you guys do this kind of thing?

Maybe, I should create my own custom scrollview, but how ?

struct ScrollViewCustom /* What to write here? */ View {

    @AppStorage("variable") private var variable = false
    @ViewBuilder /* What to write here? */

    var body: some View {

        if variable == false {
            ScrollView()
        } else {
            ScrollView(.horizontal, showsIndicators: false)
        }
    }
}

Thanks in advance!

score 2 · Accepted Answer · answered Jan 08 '23 at 21:01

The ternary operator ? always needs two options (for true/false). So you can do:

ScrollView(variable ? .horizontal : .vertical, showsIndicators: false)

But keep in mind that inside the ScrollView you'll then need to switch between a VStack or HStack depending on Scroll direction.

So actually your custom approach might be more useful. It goes like this:

struct ScrollViewCustom<V: View>: View {

    @AppStorage("variable") private var variable = false
    @ViewBuilder var content: () -> V

    var body: some View {

        if variable == false {
            ScrollView(.vertical) {
                VStack {
                    content()
                }
            }
        } else {
            ScrollView(.horizontal, showsIndicators: false) {
                HStack {
                    content()
                }
            }
        }
    }
}

and it would be used like this:

struct ContentView: View {
    
    @AppStorage("variable") private var variable = false
    
    var body: some View {
        NavigationStack {
            ScrollViewCustom {
                ForEach(0..<6) { item in
                    Text("Item \(item)")
                }
            }
            .navigationBarTitleDisplayMode(.inline)
            .toolbar() {
                Button("Switch") { variable.toggle() }
            }
        }
    }
}

Thanks @ChrisR - This is working very well. And you're absolutely right about `ScrollView(variable ? .horizontal : .vertical, showsIndicators: false)`, this is useless without the possibility to switch between a `VStack`and a `HStack'. Thanks again! — Alexnnd, Jan 10 '23 at 15:06

Custom Scrollview in SwiftUI

1 Answers1