6

私は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)

画像を正しく表示する別の方法があります。

画像

4

1 に答える 1