Search code examples
swifttextscrollviewswiftuigeometryreader

SwiftUI + ScrollView not able to add views if it's exceed view height

I am trying to show all the properties of the Text component in a single view. Showing Text with different styles and fonts. For that I am adding multiple Text components in a single view.

To make it possible I am using the ScrollView component and adding all Text components in it. At some point, it won't allow me to add one more component in the scrollView and showing different errors each time.

Code:

struct TextClass: View {
    var body: some View {
        GeometryReader { geometry in
            ScrollView(.vertical, showsIndicators: false) {
                Text("This is suppose to be a really long text that can go on to multiple lines. By default, it could go more than one lines.").padding()

                Text("This is only one line regardless of how long the sentence is")
                    .padding()
                    .lineLimit(1)
                Text("Hello Swift - LargeTitle").font(.largeTitle).padding()
                Text("Hello Swift - Title").font(.title).padding()
                Text("Hello Swift - Headline").font(.headline).padding()
                Text("Hello Swift - SubHeadline").font(.subheadline).padding()
                Text("Hello Swift - body").font(.body).padding()
                Text("Hello Swift- callout").font(.callout).padding()
                Text("Hello Swift- Footnote").font(.footnote).padding()

                Text("Font Weight - Ultralight").fontWeight(.ultraLight).padding()
                Text("Font Weight - Thin").fontWeight(.thin).padding()
    //            Text("Font Weight - light").fontWeight(.light).padding()
    //            Text("Font Weight - Regular").fontWeight(.regular).padding()
            }.frame(width: geometry.size.width)
        }
    }
}

struct TextClass_Previews: PreviewProvider {
    static var previews: some View {
        TextClass()
    }
}

It shows error like:

enter image description here

If I comment line 

Text("Font Weight - Thin").fontWeight(.thin).padding()

the error is gone.

It seems that it only allows me to add 10 Text component in this situation If I add more than that it gives me an error.

Is it a bug? is it a common behavior in SwiftUI? What is the benefit of scrollView if it won't allow adding more components?

Solution

  • You need to use Group as you can't have more than 10 elements inside a view 

    struct TextClass: View {
    var body: some View {
        GeometryReader { geometry in
            ScrollView(.vertical, showsIndicators: false) {
                    Group {
                            Text("This is suppose to be a really long text that can go on to multiple lines. By default, it could go more than one lines.").padding()
                            Text("This is only one line regardless of how long the sentence is")
                                .padding()
                                .lineLimit(1)
                            Text("Hello Swift - LargeTitle").font(.largeTitle).padding()
                            Text("Hello Swift - Title").font(.title).padding()
                            Text("Hello Swift - Headline").font(.headline).padding()
                            Text("Hello Swift - SubHeadline").font(.subheadline).padding()
                            Text("Hello Swift - body").font(.body).padding()
                    }
                    Group {
                            Text("Font Weight - Ultralight").fontWeight(.ultraLight).padding()
                            Text("Font Weight - Thin").fontWeight(.thin).padding()
                            Text("Font Weight - light").fontWeight(.light).padding()
                            Text("Font Weight - Regular").fontWeight(.regular).padding()
                    }
            }.frame(width: geometry.size.width)
        }
    }
}