WalterBeiter
WalterBeiter

Reputation: 2364

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

Upvotes: 2

Views: 1959

Answers (2)

EmilioPelaez
EmilioPelaez

Reputation: 19922

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()
            )
    }
}

Upvotes: 4

panther222128
panther222128

Reputation: 1

I don't know this is right for your needs, but this way can be answer.

struct ContentView: View {
    var body: some View {
        GeometryReader { geometry in
            VStack() {
                Text("Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to mak")
                    .font(.title)
                    .background(Color.blue)
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Upvotes: 0

Related Questions