ios - SwiftUI，在 HStack 内的屏幕外渲染文本

Question

我在 HStack 中有三个 View 。前两个是 HStack 的，第三个是文本。我想使用 .offset 使 Text 离开屏幕。然后我有一个 DragGesture()，它允许我将 View 拉过来。

尽管当我拉动时，文本不存在。我尝试使用 .offset 值，当我降低它时，只有部分文本不在屏幕上，其余文本不存在。

如何在拖动屏幕后让文本呈现/实际可见？

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

Answer 1

这有点棘手。这里主要是.fixedSize(horizontal: true, vertical: false) - 让 Text 水平扩展。不需要 .lineLimit(1)。

您还应该删除 Spacer()。因为它们也会水平扩展，所以 SwiftUI 会卡住，试图弄清楚哪些要扩展，哪些不扩展。

然后是Color.clear。这有几个目的:

• 提供预期的调整大小行为:Color 可以自由调整大小，所以如果你想在另一个 View 中使用 ContentView，你不会不要遇到麻烦。
• 对齐 HStack:因为它比屏幕宽度还宽，SwiftUI 默认会将其居中。您希望它左对齐，因此您可以将 .leading 传递给 alignment参数。

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

结果: