1

I am having some trouble with ScrollView, I have the following code:

struct ContentView: View {

    private enum Constants {
        static let cellSize = CGSize(width: 100.0, height: 100.0)
        static let rowSpacing: CGFloat = 8.0
    }


    @State private var rowCount = 1
    @State private var contentOffset = CGPoint.zero

    private var scrollViewHeight: CGFloat {
        CGFloat(rowCount) * Constants.cellSize.height + (CGFloat(rowCount) - 1.0) * Constants.rowSpacing
    }

    var body: some View {
        NavigationView {
            ScrollView(.horizontal) {
                ScrollView {
                    LazyVStack(spacing: Constants.rowSpacing) {
                        ForEach((0..<rowCount), id: \.self) { _ in
                            LazyHStack {
                                ForEach((1...20), id: \.self) {
                                    Text("Cell \($0)")
                                        .frame(
                                            width: Constants.cellSize.width,
                                            height: Constants.cellSize.height
                                        )
                                        .background(.red)
                                }
                            }
                        }
                    }
                }
                .scrollIndicators(.hidden)
            }
            .ignoresSafeArea(edges: .bottom)
            .frame(maxHeight: scrollViewHeight)
            .scrollIndicators(.hidden)
            .toolbar {
                Button("Add Row") {
                    rowCount += 1
                }
                Button("Remove Row") {
                    rowCount -= 1
                }
            }
            .navigationTitle("Test")
        }
    }
}

For some reason the ScrollView content is centered vertically:

enter image description here

I need the content to align to the top. Any idea on how to fix this?

1
  • If you want to set the frame at something lower than screen height, add a spacer after to it will not be centered vertically Commented Oct 16, 2022 at 16:30

2 Answers 2

1

enter image description here

You used Vstack and Spacer to align the area of the horizontal scroll view to the top. Please check if the implementation you want is correct.


import SwiftUI

struct ContentView: View {

    private enum Constants {
        static let cellSize = CGSize(width: 100.0, height: 100.0)
        static let rowSpacing: CGFloat = 8.0
    }


    @State private var rowCount = 1
    @State private var contentOffset = CGPoint.zero

    private var scrollViewHeight: CGFloat {
        CGFloat(rowCount) * Constants.cellSize.height + (CGFloat(rowCount) - 1.0) * Constants.rowSpacing
    }

    var body: some View {
        NavigationView {
            VStack {
                ScrollView(.horizontal) {
                    ScrollView {
                        LazyVStack(spacing: Constants.rowSpacing) {
                            ForEach((0..<rowCount), id: \.self) { _ in
                                LazyHStack {
                                    ForEach((1...20), id: \.self) {
                                        Text("Cell \($0)")
                                            .frame(
                                                width: Constants.cellSize.width,
                                                height: Constants.cellSize.height
                                            )
                                            .background(.red)
                                    }
                                }
                            }
                        }
                    }
                    .scrollIndicators(.hidden)
                }
                .background(.cyan)
                .ignoresSafeArea(edges: .bottom)
                .frame(maxHeight: scrollViewHeight)
                .scrollIndicators(.hidden)
                .toolbar {
                    Button("Add Row") {
                        rowCount += 1
                    }
                    Button("Remove Row") {
                        rowCount -= 1
                    }
                }
                .navigationTitle("Test")
                Spacer()
            }

        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
Sign up to request clarification or add additional context in comments.

Comments

0

Can you remove the line where you are setting the frame explicitly.

//.frame(maxHeight: scrollViewHeight)

And check it's working for me.

enter image description here

3 Comments

I need to set that height though. I don't want the scroll view to occupy the entire screen height.
But if you keep adding rows it will go beyond the screen anyway? no?
What %age of Screen height you want it to max?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.