为什么在 ZStack 中更改图像的 contentMode 时文本会扩展？

Question

我有一个 SwiftUI 视图，如下所示：

@State var showFullScreen: Bool = false

ZStack {
    Image(uiImage: image)
        .resizable()
        .aspectRatio(contentMode: showFullscreen ? .fill : .fit)
        .padding(showFullscreen ? 0 : 16)
            
    VStack {
        Spacer()
                
        Label("{switchViewsMessage}".localized(), systemImage: "hand.point.up.left.fill")
            .frame(maxWidth: .infinity, alignment: .center)
            .padding()
            .background(bgColor)
            .applyShape(.rounded)
    }
    .padding()
}
.onTapGesture { withAnimation { showFullscreen.toggle() } }
.navigationBarTitle("{photo}".localized())

当 State 设置为 showFullScreen = false 时，一切看起来都符合预期。但是，当将 showFullScreen 设置为 true 时，图像会变为 .fill 以占据整个屏幕，但灰色背景的文本也会变得比屏幕更宽。

为什么在更改状态时文本的宽度也会扩大？

Answer 1

Is there any way I can still allow the Image to expand while the Text can only fill the available Screen Space?

改为使用以下架构 - 通过将每个图像和文本放在自己的 space 中来分隔图像和文本：图像在背景中，文本在叠加层中，例如

Color.clear           // << fills screen space (taking into account safe area
  .background(

     ... your image here

  )
  .overlay(

    VStack {
       ... your text here
    }

  )
  .onTapGesture { withAnimation { showFullScreen.toggle() } }

为什么在 ZStack 中更改图像的 contentMode 时文本会扩展？

Why does Text expand when changing contentMode of an Image inside a ZStack?

image

contentmode

ios

swift

swiftui