我有一个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
以获取整个屏幕,但灰色背景的文本也会变得比屏幕更宽。
为什么在改变状态时文本也会在宽度上扩展?
有没有什么方法我可以仍然允许图像展开,而文本只能填充可用的屏幕空间?
请使用以下模式-将图像和文本分别放置在自己的空间中:图像放在背景中,文本放在覆盖层中,如
Color.clear // << fills screen space (taking into account safe area
.background(
... your image here
)
.overlay(
VStack {
... your text here
}
)
.onTapGesture { withAnimation { showFullScreen.toggle() } }