SwiftUI, Render text off screen that is inside an HStack

Question

I have three views inside an HStack. The first two are HStack's and the third is text. I want to use .offset to make the Text go off screen. I then have a DragGesture() which allows me to pull the view over.

Although when I pull, the text is not there. I played around with the .offset value and when I lowered it so only part of the text is off screen, the rest of the text is not there.

How can I get the text to render/ actually be viewable once I drag the screen?

import SwiftUI

struct ContentView: View {
    
    @State private var draggedOffset = CGSize.zero
    
    var body: some View {
        
               
                        HStack {
                            Rectangle()
                                .frame(width: 100, height: 100, alignment: .center)
                            
                            Spacer()
                            
                            Rectangle()
                                .frame(width: 100, height: 100, alignment: .center)
                            
                            Spacer()
                        
                        Text("Hello, world! Testing, Testing")
                            .padding()
                            .lineLimit(1)
                    }
                    
                .padding()
                        .animation(.spring())
                        .offset(x: draggedOffset.width)
                        .gesture(DragGesture()
                                    .onChanged { value in
                                        self.draggedOffset = value.translation
                                    }
                                    .onEnded { value in
                                        self.draggedOffset = CGSize.zero
                                    }
                        )

    }
    
}

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

user_14351818 · Answer

It's a bit tricky. The main thing here is .fixedSize(horizontal: true, vertical: false) - that lets the Text expand horizontally. There's no need for .lineLimit(1).

You should also remove the Spacer()s. Because those also expand horizontally, SwiftUI will get stuck trying to figure out which ones to expand and which to not.

Then, there's the Color.clear. This has a couple purposes:

Give expected resizing behavior: Color can be freely resized, so if you ever want to use ContentView inside another View, you won't run into trouble.
Align the HStack: Because it's wider than the screen width, SwiftUI will center it by default. You want it aligned left, so you can pass in .leading to the alignment parameter.

struct ContentView: View {
    
    @State private var draggedOffset = CGSize.zero
    
    var body: some View {
        Color.clear /// placeholder view that fills the screen width
            .background( /// use this to constrain everything to the bounds of the screen
                HStack {
                    Rectangle()
                        .frame(width: 100, height: 100) /// `alignment` is unnecessary here
                    
                    Rectangle()
                        .frame(width: 100, height: 100)
                    
                    Text("Hello, world! Testing, Testing")
                        .padding()
                        .fixedSize(horizontal: true, vertical: false) /// make the Text extend as much as possible horizontally
                }, alignment: .leading /// align everything left
            )
            .padding()
            .animation(.spring())
            .offset(x: draggedOffset.width)
            .gesture(
                DragGesture()
                    .onChanged { value in
                        self.draggedOffset = value.translation
                    }
                    .onEnded { value in
                        self.draggedOffset = CGSize.zero
                    }
            )
    }
}

Result:

SwiftUI, Render text off screen that is inside an HStack

1 Answers