我在 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()
}
}
最佳答案
这有点棘手。这里主要是.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
}
)
}
}
结果:
关于ios - SwiftUI,在 HStack 内的屏幕外渲染文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68332590/