我正在使用VStack
显示图片(从json中加载多张不同大小的图片)
我需要让图片占据整个屏幕宽度(即VStack
的宽度),并保持其宽高比,并且能够根据屏幕宽度调整大小,使其高度与宽度成比例。
我尝试了不同的方法,但都不能正确地显示图片。
我的视图如下:
struct ContentView: View {
var body: some View {
VStack {
GeometryReader { geometry in
VStack {
Text("Width: \(geometry.size.width)")
Text("Height: \(geometry.size.height)")
}
.foregroundColor(.white)
}
.padding()
.frame(alignment: .topLeading)
.foregroundColor(Color.white) .background(RoundedRectangle(cornerRadius: 10) .foregroundColor(.blue))
.padding()
GeometryReader { geometry in
VStack {
Image("sample")
.resizable()
//.frame(width: geometry.size.width)
.aspectRatio(contentMode: .fit)
}
.foregroundColor(.white)
}
.frame(alignment: .topLeading)
.foregroundColor(Color.white) .background(RoundedRectangle(cornerRadius: 10) .foregroundColor(.blue))
.padding()
}
.font(.title)
}
}
当我使用.frame(width: geometry.size.width)
将宽度指定为geometry
的宽度时,宽度显示在整个屏幕上,但高度不保持纵横比。(看起来被压缩了)
如何获取图像的尺寸并找到其比例以将其与.aspectRatio(myratio, contentMode: .fit)
一起使用
还有另一种方法可以正确显示图像,您有什么建议吗?
resizable
必须放在aspectRatio
之前。你试过让frame
成为第三个修饰符吗? - user7014451fill
不保持纵横比。Vstack宽度已满,但不遵守比例--> https://i.stack.imgur.com/VWWPk.jpg - Mario BurgaaspectFit
时,正常显示为1000h x 400w。你是想要将图片大小调整为2500h x 1000w吗?虽然这是可行的,但显然这不是aspectFit
的意思。此外,你的屏幕截图在我看来似乎是aspectFill
,而你的代码并没有表现出来。 - user7014451json
文件,并且它们的尺寸不同。我有一个事件列表,点击其中一个事件会跳转到名为 DetailsEvent.swift 的视图(在这里显示的图片尺寸并不相同,它们是多样化的)。请参见 gif:https://i.imgur.com/GZhACWH.gif - Mario Burga