Swift 在保持纵横比的同时，使用“Vstack”将图像调整为屏幕宽度

我正在使用

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）
时，宽度显示在整个屏幕上，但高度不保持纵横比。（看起来很沮丧）

如何获取图像的尺寸并找到其比例，以便与
一起使用。aspectRatio（myratio，contentMode:.fit）

还有另一种正确显示图像的方法，有什么建议吗

您需要消除第二个
GeometryReader
，因为在
VStack
中有两个孩子，这两个孩子都能接受尽可能多的空间，这将使
VStack
无法给
图像提供正确的空间量

您还需要提高
图像
的布局优先级，以便
VStack
首先为其提供空间，这样它就可以根据需要占用足够的空间

import SwiftUI

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()
                .background(
                    RoundedRectangle(cornerRadius: 10)
                        .foregroundColor(.blue))
                .padding()
            Image(uiImage: UIImage(named: "sample")!)
                .resizable()
                .aspectRatio(contentMode: .fit)
                .layoutPriority(1)
        }
    }
}

import PlaygroundSupport
let host = UIHostingController(rootView: ContentView())
host.preferredContentSize = .init(width: 414, height: 896)
PlaygroundPage.current.liveView = host

结果:

不确定这是否可行，但您是否尝试过将宽度设置为
.infinite
？是的，With:
.frame（minWidth:0，maxWidth:.infinity，minHeight:0，maxHeight:.infinity，alignment:alignment.topLeading）
它显示为第一个选项。使用：
.frame（minWidth:0，maxWidth:geometry.size.width，minHeight:0，maxHeight:.infinity，alignment:alignment.topLeading）
最后一个想法对我不起作用-今天晚些时候我会看看是否还有其他想法。您是否尝试过更改修改器的顺序？特别是#2。（我们都知道，
resizeable
需要在
aspectRatio
之前进行。您是否尝试过将
frame
作为第三个修改器？对不起，这让我比我想象的更快地检查出东西。：-）我选择了自己的图像，使用运行iPadOS 13.1的iPad Mini。在肖像画中，它可以完美地工作。在横向-因为
aspectRatio
被设置为
.fit
-图像的高度得到尊重，而侧面的蓝色边框是因为图像的纵横比没有设置为填充。我没有发现你的代码有任何问题。你能在真实的设备上或者（至少）在模拟器上试一下吗？也许你的问题在于
PreviewProvider
。我已经在一个真实的设备（iphone XS Max）上试用过，它显示了与仿真器相同的功能。