提问者:小点点

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


我有一个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以获取整个屏幕,但灰色背景的文本也会变得比屏幕更宽。

为什么在改变状态时文本也会在宽度上扩展?


共1个答案

匿名用户

有没有什么方法我可以仍然允许图像展开,而文本只能填充可用的屏幕空间?

请使用以下模式-将图像和文本分别放置在自己的空间中:图像放在背景中,文本放在覆盖层中,如

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

     ... your image here

  )
  .overlay(

    VStack {
       ... your text here
    }

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