WatchOS ScrollView Doesn't Wrap Text Properly

Question

Right now I am able to see the text I want from my 'articles' if I set a frame with a desired width and height.

If the height is long enough it will show all of the article 'body' but with tons of space. I would like to have it where the frame can adjust it's size based on the size of the text I have so that the scrollview can scroll properly based on the desired text frames for each article body.

import SwiftUI

let articles = [
    Article (id: 0, title: "Trump as President", body: "Some very short string for the article at the moment."),
    Article (id: 1, title: "Obama as President", body: "He may not have been the worst but was he every really the best? Could he have done more or less from what we know?"),
    Article (id: 2, title: "Tanner Fry as President", body: "Who knows how well that would work as if Tanner Fry was the president. However we do know a little bit about him from his experience as a programmer. I mean who can just pick up different langauges just off the bat and start creating code for apps to run on their watch and/or phone? Not too many people know how to do that but you know who does? Tanner Fry does, that's right.")
]
var height = 0

struct ContentView: View {
    var body: some View {
        // Watch res = 448 - 368
        ScrollView(.vertical) {
            VStack(spacing: 10){
                Text("Your News").font(.title)
                ForEach(0..<articles.count) {index in
                    Text(articles[index].title)
                    Text(articles[index].body).frame(width: 170, height: 170)
//                    Text(articles[index].body).lineLimit(50).padding(EdgeInsets(top: 0, leading: 10, bottom: 0, trailing: 10))
                    // Height needs to be variable based on the amount of text in the
                    // articles description. OR find a wrapper
                    // We're talking about the frame for the body of text
                }
            }
        }
    }
}

I am able to scroll all of my content if my height for the frame of the article.body is long enough. Otherwise it truncates the text. Is there any way to make the height more variable to the text length so that the watchOS works properly when scrolling via the ScrollView? Am I missing something?

Thank you for your time, much appreciated.

Answer 1

Define .lineLimit(x) to what you want to be the maximum of line the Text is able to expand. Then add .fixedSize(horizontal: false, vertical: true) to secure that the size is not shrinking back due the SwiftUI layout engine. See below.

struct ContentView: View {
    var body: some View {
        // Watch res = 448 - 368
        ScrollView(.vertical) {
            VStack(spacing: 10){
                Text("Your News").font(.title)
                ForEach(0..<articles.count) {index in
                    Text(articles[index].title)
                    Text(articles[index].body)
                    .lineLimit(nil)
                    .multilineTextAlignment(.leading)
                    .fixedSize(horizontal: false, vertical: true)
//                    Text(articles[index].body).lineLimit(50).padding(EdgeInsets(top: 0, leading: 10, bottom: 0, trailing: 10))
                    // Height needs to be variable based on the amount of text in the
                    // articles description. OR find a wrapper
                    // We're talking about the frame for the body of text
                }
            }
        }
    }
}