SwiftUI ScrollView won't scroll when using fixedSize() to keep text from truncating

Question

While trying to create a ScrollView with text inside it, my text was truncating so that it never expanded beyond the height of the view. While googling the issue, I found the solution of including .fixedSize(horizontal: false, vertical: true) on the text, which solved the truncation issue. But now my ScrollView won't scroll unless I don't specify a frame height for the VStack inside the ScrollView (I can't do that because I need the contents of the VStack to align to the bottom of the ScrollView).

Here is a simplified version of the code to reproduce the issue:

import SwiftUI

struct TestView: View {
    var body: some View {
        GeometryReader { geo in
            ScrollView(.vertical, showsIndicators: false) {
                VStack(spacing: 24) {
                    Text("START")
                    
                    Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit elit non magna bibendum, id mattis turpis tristique. Sed non rhoncus dui. Proin consequat scelerisque eros, in interdum velit pellentesque et. Proin at odio nec tellus feugiat suscipit ac nec tellus. Integer ac consectetur justo. Aenean in sagittis nisi. Duis et ultricies elit. Aliquam erat volutpat. Nam iaculis eget mi at fermentum. Proin ut sapien leo. Aliquam elementum vehicula arcu sit amet placerat. Quisque gravida felis ante, et rhoncus est congue viverra. Sed sagittis ornare mollis. Vivamus lorem libero, tincidunt vel feugiat nec, ultricies sed orci. Nulla facilisi. Etiam imperdiet condimentum eros, at sagittis quam euismod et. Maecenas cursus imperdiet mi, at ultrices nulla lacinia lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit elit non magna bibendum, id mattis turpis tristique. Sed non rhoncus dui. Proin consequat scelerisque eros, in interdum velit pellentesque et. Proin at odio nec tellus feugiat suscipit ac nec tellus. Integer ac consectetur justo. Aenean in sagittis nisi. Duis et ultricies elit. Aliquam erat volutpat. Nam iaculis eget mi at fermentum.")
                        .fixedSize(horizontal: false, vertical: true)
                    
                    Text("END")
                }
                .padding(.horizontal, 80)
                .padding(.top, 160)
                .frame(width: geo.size.width, height: geo.size.height, alignment: .bottom)
            }
        }
    }
}

Does anyone know what I'm doing wrong here? Any ideas would be much appreciated!

Things I've tried:

Removing the GeometryReader and setting the height and width of the VStack manually
Removing the VStack and just having text
Putting fixedSize() on the entire VStack instead of the Text element
Adding a Spacer to force the VStack to full height instead of specifying the height with the frame property

score 0 · Answer 1 · answered Jan 30 '23 at 15:56

Found a fix by @antoine-lamy! It's very hacky but it works. Double Rotation Trick

Here's the working version of the simplified code:

struct TestView: View {
var body: some View {
    GeometryReader { geo in
        ScrollView(.vertical, showsIndicators: false) {
            VStack(spacing: 24) {
                Spacer()
                
                Text("START")
                
                Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit elit non magna bibendum, id mattis turpis tristique. Sed non rhoncus dui. Proin consequat scelerisque eros, in interdum velit pellentesque et. Proin at odio nec tellus feugiat suscipit ac nec tellus. Integer ac consectetur justo. Aenean in sagittis nisi. Duis et ultricies elit. Aliquam erat volutpat. Nam iaculis eget mi at fermentum. Proin ut sapien leo. Aliquam elementum vehicula arcu sit amet placerat. Quisque gravida felis ante, et rhoncus est congue viverra. Sed sagittis ornare mollis. Vivamus lorem libero, tincidunt vel feugiat nec, ultricies sed orci. Nulla facilisi. Etiam imperdiet condimentum eros, at sagittis quam euismod et. Maecenas cursus imperdiet mi, at ultrices nulla lacinia lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit elit non magna bibendum, id mattis turpis tristique. Sed non rhoncus dui. Proin consequat scelerisque eros, in interdum velit pellentesque et. Proin at odio nec tellus feugiat suscipit ac nec tellus. Integer ac consectetur justo. Aenean in sagittis nisi. Duis et ultricies elit. Aliquam erat volutpat. Nam iaculis eget mi at fermentum.")
                    .fixedSize(horizontal: false, vertical: true)
                
                Text("END")
            }
            .padding(.horizontal, 80)
            .padding(.top, 160)
            .rotationEffect(Angle(degrees: 180))
        }
        .rotationEffect(Angle(degrees: 180))
    }
}}

SwiftUI ScrollView won't scroll when using fixedSize() to keep text from truncating

1 Answers1