具有高高度布局的SwiftUI图像

Question

我正在尝试获得一个基本的东西，但我无法使它工作！

我想要一个VStack，它包含一个文本、一个图像和第二个文本。所有的东西都应该在屏幕上可见。因此，图像应该调整大小(顶部和底部裁剪(，为两个文本留出空间。。。但不是。

没有.scaledToFill()，它工作得很好，但图像被拉伸了

问题(我认为(是因为图像的高度很高！

(我尝试过GeometryReader、fixedSize、layoutPriority，但我尝试过的都不起作用(

图片来自维基百科：图片链接

struct TestView: View {
var body: some View {
VStack(spacing: 8) {
Text("Text 1")
Image("image")
.resizable()
.scaledToFill()
.padding()
Text("Text 2")
}.background(Color.blue)
}
}

模拟器屏幕

需要什么：所需的图像

谢谢：(

Answer 1

好的，我找到了的方法

Color.clear
.background(Image("image")
.resizable()
.scaledToFill())
.clipped()

嵌入图像作为清晰Color的背景，图像仅限于父级大小！

结果：https://i.stack.imgur.com/PHtd9.jpg

Answer 2

struct TestView: View {
var body: some View {
VStack(spacing: 8) {
Text("Text 1")
Image("image")
.resizable()
.scaledToFill()
.padding()
Text("Text 2")
}
.background(Color.blue)
.padding(.top)
}
}

如果你知道视图有多大，你也可以使用maxHeight frame参数来框定视图。你也可以在图像本身上这样做。

struct TestView: View {
var body: some View {
VStack(spacing: 8) {
Text("Text 1")
Image("image")
.resizable()
.scaledToFill()
.padding()
Text("Text 2")
}
.background(Color.blue)
.frame(maxHeight: 500) //500 can be any value of your choice
}
}

Answer 3

您也可以使用带有占位符的AsyncImage来加载图像

struct ContentView: View {
var body: some View {
VStack(spacing: 8) {
Text("Text 1")            
AsyncImage(url: URL(string: "https://upload.wikimedia.org/wikipedia/commons/thumb/e/ee/Isabella_of_France_by_Froissart.png/1024px-Isabella_of_France_by_Froissart.png")){ image in
image.resizable()
}placeholder: {
ProgressView()
}
.scaledToFill()
.frame(width: 200, height: 400, alignment: .center)

Text("Text 2")
}
.background(Color.blue)
}
}

Answer 4

您似乎正在寻找一种考虑Safe Area的方法。因为在第二个图像中，所有内容都与安全区域有关，而第一个图像没有。然而，除非我们指示使用.ignoresSafeArea()忽略安全区域，否则代码似乎在默认情况下会这样做。查看您调用TextView的视图，您可能会使用蓝色背景的ZStack，这会影响其子级。

如果没有，您应该使用scaledToFit而不是scaledToFill，因为正如我看到的两张图像一样，第二张是裁剪的。

Answer 5

你试过吗

struct TestView: View {
var body: some View {
VStack(spacing: 8) { // You can alternatively increase the spacing and remove the padding for the image
Text("Text 1")
Image("image")
.resizable()
.scaledToFill()
.padding()
Text("Text 2")
}.background(Color.blue)
.padding() // Note padding here
}
}