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:

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

CodePudding user response：

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

CodePudding user response：

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

//.frame(maxHeight: scrollViewHeight)

And check it's working for me.