具有高高度布局的 SwiftUI 图像

Question

我正在尝试获得一个基本的东西，但我做不到！

我想要一个包含文本、图像和第二个文本的 VStack。一切都应该在屏幕上可见。所以图像应该调整大小（裁剪顶部和底部）为两个文本留出空间......但不是。

没有 .scaledToFill() 它运行良好，但图像被拉伸

问题（我认为）是因为图像高度很高！

（我试过 GeometryReader、fixedSize、layoutPriority，但我试过的都不起作用）

图片来自维基百科：Image link

struct TestView: View {
    var body: some View {
        VStack(spacing: 8) {
            Text("Text 1")

            Image("image")
                .resizable()
                .scaledToFill()
                .padding()

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

Simulator screen

需要什么： Image of what is needed

谢谢:)

Answer 1

你试过了吗

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
  }
}

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 框架参数来构建视图。您也可以对图像本身执行此操作。

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

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

如果不是，你应该使用 scaledToFit 而不是 scaledToFill 因为我看到两张图片，第二张被裁剪了。

Answer 4

您也可以使用 AsyncImage with placeholder 来加载图片

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 5

好的，我找到方法了

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

嵌入图片作为清晰的背景Color，图片限制为父尺寸！

结果：https://imgur.com/a/ceZRqSw

具有高高度布局的 SwiftUI 图像

SwiftUI Image with high height layout

size

image

resizable

swift

swiftui