Search code examples
iosswiftswiftuiswiftui-text

How to get rid of vertical text padding in SwiftUI?

I want to make a rectangle with text inside. the rectangle should be pinned to the right and left side of the display (or superview). It's height should be determined by the text.

I tried the following code:

struct DescriptionView: View {

var description =
"""
02.11.2021
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Illud urgueam, non intellegere eum quid sibi dicendum sit, cum dolorem summum malum esse dixerit. Omnis enim est natura diligens sui. Quamquam haec quidem praeposita recte et reiecta dicere licebit. Duo Reges: constructio interrete. Idem iste, inquam, de voluptate quid sentit? Ergo instituto veterum, quo etiam Stoici utuntur, hinc capiamus exordium. Tum ille: Tu autem cum ipse tantum librorum habeas, quos hic tandem requiris? Bona autem corporis huic sunt, quod posterius posui, similiora..
Bild © Lorem Lipsum
"""

var body: some View {
    ZStack(alignment: .bottom) {
        Color.red
            .edgesIgnoringSafeArea(.all)

        Text(description)
            .foregroundColor(.white)
            .font(.headline)
            .background(
                Rectangle()
            )
            .edgesIgnoringSafeArea(.horizontal)
        
    }
}

}

This results looks like this: enter image description here

As you can see, the text has some padding on the left and right side. How can I get rid of this? The rectangle should always be as wide as possible, while the text determines the height of the rectangle.

Update: I am using Xcode Version 13.1 (13A1030d). When I embed DescriptionView() in A TabView, the padding goes away in Xcode Preview. However, when I launch the app in the simulator, the padding appears again.

struct ContentView: View {
    var body: some View {
        ZStack {
            Color.black
                .edgesIgnoringSafeArea(.all)
            TabView {
                DescriptionView()
                DescriptionView()
                DescriptionView()
            }
            .tabViewStyle(PageTabViewStyle())
            .indexViewStyle(PageIndexViewStyle(backgroundDisplayMode: .interactive))
        }
    
    }
}

Xcode Preview:

enter image description here

Simulator:

enter image description here

Update 2: As one of the answers suggested, I tried the geometry reader. I got rid of the padding, but the alignment is now wrong. Also I don't think it should be that complicated (with a geometry reader and a stack):

var body: some View {
    ZStack(alignment: .bottom) {
        Color.red
            .edgesIgnoringSafeArea(.all)
        
        GeometryReader { geometry in
            VStack() {
                Text(description)
                    .foregroundColor(.white)
                    .font(.headline)
                    .frame(maxWidth: .infinity)
                    .background(
                        Color.black
                    )
            }
        }
        
    }
}

enter image description here

Solution

  • Your Text view is calculating its size using the max width (in this case screen width) and the result is a width that is smaller than the screen width because there isn't a line of text that fits the screen perfectly.

    If you want the Text view to expand completely you should use the frame modifier:

    var body: some View {
    ZStack(alignment: .bottom) {
        Color.red
            .edgesIgnoringSafeArea(.all)
        Text(description)
            .foregroundColor(.white)
            .font(.headline)
            .frame(maxWidth: .infinity, alignment: .leading)
            .background(
                Rectangle()
            )
    }
}