swift - 使用“Vstack”将图像大小调整为屏幕宽度，同时保持纵横比

Question

我正在使用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)

还有另一种正确显示图像的方法，任何建议

Answer 1

你需要消除第二个GeometryReader，因为有两个孩子VStack都接受尽可能多的空间，这将使他们VStack无法提供Image正确数量的空间。

您还需要提高布局的优先级，Image以便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

结果：