SwiftUI - centre content on a List

Question

How can I make this arrow on the centre of the list?

struct ProductsList : View {
var body: some View {

    VStack {
        List {
            Image(systemName: "shift")


        }

    }
}

}

Answer 1

You may just wanna use some Spacers.

struct ProductList : View {
    var body: some View {
        VStack {
            List {
                HStack {
                   Spacer()
                   Image(systemName: "shift")
                   Spacer()
                } 
            }
        }
    }
}

Answer 2

I would suggest to use ViewModifier:

struct CenterModifier: ViewModifier {
    func body(content: Content) -> some View {
        HStack {
            Spacer()
            content
            Spacer()
        }
    }
} 

so that in your list, if you have more different type of UI elements its more convenient way to do so:

struct ExampleList: View {
    var body: some View {
        List {
            Image(systemName: "shift").modifier(CenterModifier())
            SomeOtherView().modifier(CenterModifier())
        }
    }
}

Answer 3

Try this:

var body: some View {
    List {
        GeometryReader { geometry in
            VStack(alignment: .center) {
                Image(systemName: "shift")
            }.frame(width: geometry.size.width)
        }
    }
}

Answer 4

View modifier:

import SwiftUI

private struct CenterHorizontallyModifier: ViewModifier {

    func body(content: Content) -> some View {
        HStack(spacing: 0) {
            Spacer()
            content
            Spacer()
        }
    }
}

extension View {

    func centerHorizontally() -> some View {
        modifier(CenterHorizontallyModifier())
    }
}

Usage:

struct ExampleList: View {
    var body: some View {
        List {
            Image(systemName: "shift").centerHorizontally()
        }
    }
}

I can't comment yet, but this is an improved version of this answer