Search code examples
swiftuidynamicfonts

SwiftUI : How to set the height of an empty Text to one line

I have a Text that is initially empty and is populated with custom text by pressing buttons. The size of the font is

.dynamicTypeSize(.xxxLarge)

I want to display the Text within a fixed frame surrounded by a border. The problem is when the Text is empty, the frame flattens.

Here is the code of the textview:

                                Text(filtreString)
                                    .padding(6)
                                    .dynamicTypeSize(.xxxLarge)
                                    .frame( maxWidth: .infinity)
                                    .background(Color("fondbleu"))
                                    .border(Color.black, width: 1)
                                    .cornerRadius(20.0)
                                    .overlay(
                                        RoundedRectangle(cornerRadius:20).stroke(.black, lineWidth: 1))

Here is the textview, empty and populated:

enter image description hereenter image description here

It might be quite simple, but I could not find the way to set the height of the view without populating some text inside the textview. I could for example put a space character " " but I would like to avoid that because the empty string is one of the possible values.

Can someone help me out ? Thanks !

I tried something like font.lineHeight but the compiler did not seem to like it.

Solution

  • I was going to suggest reserving space for a line limit:

    Text(filtreString)
    .lineLimit(1, reservesSpace: true)

    However, it seems this doesn't help either (maybe a bug).

    So I would suggest showing a space instead of an empty string:

    Text(filtreString.isEmpty ? " " : filtreString)

    Alternatively, you could use a hidden placeholder to reserve the height, then show the text as an overlay:

    Text(".")
    .hidden()
    .frame(maxWidth: .infinity)
    .overlay { Text(filtreString) }
    .dynamicTypeSize(.xxxLarge)
    .padding(6)
    .background {
        RoundedRectangle(cornerRadius: 20.0)
            .fill(Color("fondbleu"))
            .stroke(.black, lineWidth: 1)
    }