How to make resizable text in an item in a list in Swift UI

Question

I'm creating a cell which has multiple text and an image in it. I want one text to resize itself and its cell, but how to do it?

I tried using .fixedSize() and some UILabel calculation but I could fix it.

Navigation Button which is also a cell in the list:

NavigationButton(destination: ..., isDetail: true, label: {
                    Cell(model: rowModel)
                })

struct Cell: View {
    var model: OfferModel

    var body: some View {
        VStack {
            HStack {
                Image(systemName: "camera").frame(width: 60, height: 60)
                VStack(alignment: .leading) {
                    Text(model.name)
                        .font(.caption)
                        .textContentType(.name)
                    Text(self.model.text)
                        .lineLimit(3)
                        .multilineTextAlignment(.leading)
                        .font(.title)
                }
                Spacer()
                OfferPriceView(model: model, alignment: .trailing)
            }
            OfferDetailInformationView(key: "Street", value: model.adress, style: .streetAddressLine1)
            OfferDetailInformationView(key: "City", value: model.city, style: .addressCity)
            OfferDetailInformationView(key: "Country", value: model.country, style: .countryName)
        }
    }
}

struct OfferDetailInformationView: View {
    var key: String
    var value: String
    var style: UITextContentType?

    init(key: String, value: String, style: UITextContentType? = nil) {
        self.key = key
        self.value = value
        self.style = style
    }

    var body: some View {
        HStack {
            Text("\(key):").bold()
            Text(value)
            .textContentType(style)
            Spacer()
        }
    }
}

struct OfferPriceView : View {
    let model: OfferModel
    let alignment: HorizontalAlignment

    init(model: OfferModel = .example, alignment: HorizontalAlignment = .center) {
        self.model = model
        self.alignment = alignment
    }

    var body: some View {
        VStack(alignment: alignment) {
            Text("\(String(format: "%.2f", model.cost))\(model.currency)").bold().color(.red)
            Text(model.paymentRate).color(.red)
        }
    }
}

I would like the Text with model.text to be expanded vertically if the text doesn't fit in a single line. For now it just clips the tex in one line.

The view structure is as follows:

Content View:
- List:
  - Navigation Button:
    - Vertical Stack:
      - Horizontal Stack:
        
        Image
        
        Vertical Stack:
        
        Text(model.name)
        
        Text(model.text)
        
        Spacer
        
        Vertical Stack (inside OfferPriceView):
        
        Text
        
        Text
      - Horizontal Stack (OfferDetailInformationView)
        
        Text(currency)
        
        Text(payment)
        
        Spacer

user_8657802 · Answer

Try

Text("Hello")
.font(.largeTitle)
.minimumScaleFactor(0.3)

user_5623035 · Answer

.lineLimit modifier is the one that controls Text height based on their content.

So if you want to have an unlimited lines of text (should be fit in screen or you must use ScrollView), you should use this:

.lineLimit(nil)

UPDATE

Tested in Xcode 11 Beta 7 and nil works as expected to be no limit. But if nil is not acceptable (like it wasn't on earlier versions), so set it to a large integer number:

.lineLimit(Int.max)

Keep in mind The second option is just a workaround till SwiftUI reaches it first release version.

user_298368 · Answer

You can use lineLimit(nil) to make text multiline

    Text(repo.description)
                .font(.subheadline)
                .lineLimit(nil)

user_6690474 · Answer

Tested on Xcode 11.1 GM Seeds, If you don't give any lineLimit modifier to text, then Text will set line limit to infinite as per its text string content.

Generated this:

By Using this Code:

How to make resizable text in an item in a list in Swift UI

4 Answers