Make ScrollView span the entire width of screen

Viewed 62

I am trying to make the width of the scrollview span the entire screen, however the width for some reason does not span the entire screen despite using infinity.

ScrollView {
    VStack(spacing: 20) {
        ForEach(0..<10) {
            Text("Item \($0)")
                .foregroundColor(.white)
                .font(.largeTitle)
                .frame(width: .infinity, height: 200.0)
                .background(.red)
        }
    }
}
.frame(width : .infinity , height: 750)

Current Scrollview

1 Answers

Apparently, SwiftUI seems to interpret the fixed size of .infinity as the default sizing behavior in this particular frame modifier.

To achieve what you need, use the .frame(minWidth: 0, maxWidth: .infinity) modifier for the inner Text elements to make them as wide as possible, and the containers all the way up to ScrollView will resize accordingly, so you won't need the .frame modifier for the ScrollView:

ScrollView {
    VStack(spacing: 20) {
        ForEach(0..<10) {
            Text("Item \($0)")
                .foregroundColor(.white)
                .font(.largeTitle)
                .frame(minWidth: 0, maxWidth: .infinity)
                .background(.red)
        }
    }
}
Related