Make ScrollView content fill its parent in SwiftUI

Question

I'd love to build a scrolling screen, so I wanted to embed it ScrollView. But I am not able to achieve it the view just shrinks to its compressed size. Let's say that I want the ScrollView to scroll vertically so I'd love the content to match scrollView's width. So I use such preview:

struct ScrollSubview_Previews : PreviewProvider {
    static var previews: some View {
        func textfield() -> some View {
            TextField(.constant("Text")).background(Color.red)
        }

        return Group {
            textfield()
            ScrollView {
                textfield()
            }
        }
    }
}

But it ends with result like this:

Possible duplicate of [Make a VStack fill the width of the screen in SwiftUI](https://stackoverflow.com/questions/56487323/make-a-vstack-fill-the-width-of-the-screen-in-swiftui) — Jake, Jun 07 '19 at 07:27

score 26 · Accepted Answer · edited Nov 08 '22 at 20:44

26

A simple way for you, using frame(maxWidth: .infinity)

ScrollView(.vertical) {
    VStack {
        ForEach(0..<100) {
            Text("Item \($0)")
        }
    }
    .frame(maxWidth: .infinity)
}

edited Nov 08 '22 at 20:44

Jenea Vranceanu

4,530
2
18
34

answered Jul 05 '20 at 03:04

Hoang Nguyen

344
3
4

score 11 · Answer 2 · answered Jun 07 '19 at 02:12

11

Here is a trick: introduce a HStack that only has one Spacer:

return Group {
        HStack {
            Spacer()
        }
        textfield()
        ScrollView {
            textfield()
        }
    }

answered Jun 07 '19 at 02:12

ielyamani

17,807
10
55
90

score 9 · Answer 3 · answered Jun 25 '19 at 13:23

It's a known issue existing also in beta 2 - check the Apple's Xcode 11 release notes here ⬇️ https://developer.apple.com/documentation/xcode_release_notes/xcode_11_beta_2_release_notes.

The workaround mentioned by Apple themselves is to set fixed frame for ScrollView inside element. In that case I suggest to use GeometryReader for fix screen width, height is automatically fit to content.

For example if you need to fit the ScrollView's content to screen width you can something like:

return GeometryReader { geometry in
     Group {
         self.textfield()
         ScrollView {
             self.textfield()
                 .frame(width: geometry.size.width)
         }
     }
 }

which part in the release notes do they mention this? I am not seeing it. — Just a coder, Jun 30 '19 at 15:08

score 9 · Answer 4 · edited Jul 12 '22 at 02:24

9

Actually you don't need GeometryReader anymore. ScrollView has been refactored in Xcode beta 3. Now you can declare that you have a .horizontal or .vertical ScrollView. This makes the ScrollView behave like it should, like any normal View protocol.

Ex:

ScrollView(.horizontal, showsIndicators: false) {
    HStack {
        ForEach((1...10).reversed()) {
            AnyViewYouWant(number: $0)
        }
    }
}

This will result in a view with the width of its parent scrolling horizontally. The height will be defined by the ScrollView's subviews height.

edited Jul 12 '22 at 02:24

shim

9,289
12
69
108

answered Jul 04 '19 at 20:20

Leonel Menezes Morato Lima

168
1
10

18

This answer is completely irrelevant to the question. He didn't ask about the direction of the scroll view. – Peter Schorn Sep 20 '20 at 04:26
1

@PeterSchorn this is the way to fill the super view at the moment. Before it, you had to use geometry reader to know the correct space since we didn't have a .vertical or .horizontal param, that happened during the beta. Now you can add a ScrollView just like any view. I hope you understood the context. – Leonel Menezes Morato Lima Oct 23 '20 at 13:51
@PeterSchorn before it, the ScrollView would resize it's subviews, not showing the desired content. – Leonel Menezes Morato Lima Oct 23 '20 at 13:53
1

I think there is a glitch or misunderstanding somewhere in here. My scroll view is taking the size of the screen. However 'custom views, set to use all available space' inside the scroll are not stretching to fill the content of the scroll view. I know they should. And they do if you play with a typical Text for example... – Klajd Deda Jan 02 '21 at 18:50
@LeonelMenezesMoratoLima this answer is still wrong. – Claus Jørgensen Dec 03 '21 at 09:54

score 4 · Answer 5 · answered Aug 26 '22 at 04:59

Scroll view content will expand to available size.

GeometryReader { geo in
            ScrollView(.vertical) {
                YourView().frame(
                    minWidth: geo.size.width,
                    minHeight: geo.size.height
                )
            }
        }

score 2 · Answer 6 · answered May 06 '21 at 12:18

2

You can also done this using extra HStack and space.

ScrollView(.vertical) {
    HStack {
        VStack {
             ForEach(0..<100) {
                Text("Item \($0)")
             }
         }
         Spacer()
     }
}

answered May 06 '21 at 12:18

Amisha Italiya

168
1
8

This solution fixed the shrinking (width) view when using scrollview in xcode 14 beta 3 on my app....I would have thought this issue would have gone away since this post is more than a year old. – Tim Jul 19 '22 at 19:20
So this solution is working or not @Tim? – Amisha Italiya Dec 19 '22 at 06:53
As I stated in my comment, yes it is working... – Tim Dec 20 '22 at 17:09

score -4 · Answer 7 · answered Jun 06 '19 at 19:38

PreviewProvider is just about your Canvas (rendering view).

if you want to place text into ScrollView you should create your View

struct MyViewWithScroll : View {
    var body: some View {
        ScrollView {
            Text("Placeholder")
        }
    }
}

And after that, render your MyViewWithScroll in Canvas (window with iPhone from the right side of code editor)

#if DEBUG
struct MyViewWithScroll_Previews : PreviewProvider {
    static var previews: some View {
        MyViewWithScroll()
    }
}
#endif

It's in preview just for simplification, your answer produces the same result. — olejnjak, Jun 06 '19 at 19:59

Make ScrollView content fill its parent in SwiftUI

7 Answers7