SwiftUI - 如何为 ZStack 中的元素设置边界

Question

In my example image you can see that the "World" text can be moved (drag) outside the image area. It is positioned below the Add Sticker button. This element is in a ZStack. So I don't want my text element to go outside the image area. I tried giving a width and height to the ZStack, but didn't work.

Answer 1

ZStack s don't have any sort of size limitation behavior. It just stacks views on top of each other. If you want to limit your Text to the bounds of the ZStack , put it in an overlay .

Image()
    .overlay {
        Text("Hello")
        Text("World")
        Sticker()

        /// ...
        .position(x: 0, y: 0)
        .gesture(DragGesture())
    }

Answer 2

You can tell the ZStack to clip its children using the clipped(antialiased:) modifier .

ZStack {
    ...
}
.clipped()

This won't stop the user from dragging the Text outside of the ZStack 's bounds, but it will stop the outside part of the Text from being drawn.

If you don't want to let the user drag the Text outside of the ZStack 's bounds, you need to edit your question to include the code that implements dragging.