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!

Answer 1

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() }
            }
        }
    }
}