How to horizontally center content of horizontal ScrollView?

user_5657412 0
Viewed 216

I have a horizontal ScrollView, and in it an HStack, like so:

ScrollView(.horizontal) {
  HStack {
    Circle()
      .frame(width: 60, height: 60)

    ...
}

With this code, the contents of the HStack are aligned to the left of the screen, but I would like to get them in the middle of the ScrollView. How can I accomplish this?

hstack swiftui scrollview swift
2 Answers

all you need to do is to define the size of ScrollView and the HStack so when you define the size of ScrollView and define the size of HStack the view and the important thing is to make the alignment HStack to the center so that the View like a circle inside the Hstack center in it

struct ContentView: View {
var body: some View {
    ScrollView(.horizontal) {
        HStack() {
        Circle()
                .frame(width: 60, height: 60)
       // the alignment is center here
      }.frame(width: 500, height: 60,alignment: .center)
    }.frame(width: 500, height: 500)
 }
 }

enter image description here

here the alignment is leading so the circle go to left

struct ContentView: View {
var body: some View {
    ScrollView(.horizontal) {
        HStack() {
        Circle()
                .frame(width: 60, height: 60)
       // the alignment is leading here
      }.frame(width: 500, height: 60,alignment: .leading)
    }.frame(width: 500, height: 500)
 }
 }

enter image description here

here the alignment is trailing so the circle go to right

struct ContentView: View {
var body: some View {
    ScrollView(.horizontal) {
        HStack() {
        Circle()
                .frame(width: 60, height: 60)
       // the alignment is trailing here
      }.frame(width: 500, height: 60,alignment: .trailing)
    }.frame(width: 500, height: 500)
 }
 }

enter image description here

user_145821080

Assuming you want to center ScrollView's content when there is free space (because otherwise scrolling behaviour would be rather broken) here is a possible approach (w/o hardcode) - to use preference key to read scroll view's width on screen and apply it as a minimum width of content's container, the center alignment is applied by default.

Tested with Xcode 13.2 / iOS 15.2

demo

struct DemoView: View {
    @State private var scrollWidth = CGFloat.zero
    var body: some View {
        ScrollView(.horizontal) {
            HStack {
                Circle()
                    .frame(width: 60, height: 60)
            }
            .frame(minWidth: scrollWidth)    // << here (cetner by default) !!
        }
        .border(Color.green)            // << for demo
        .background(GeometryReader {
            // read width of ScrollView on screen
            Color.clear
                .preference(key: ViewWidthKey.self, value: $0.frame(in: .local).size.width)
        })
        .onPreferenceChange(ViewWidthKey.self) {
            self.scrollWidth = $0      // << store width
        }
    }
}
user_122990300
Related