如何使用填充到小部件边界的图像设置 ZStack？

Question

我的代码如下所示：

    ZStack {
        
        NetworkImage(url: url)
        VStack(alignment: .trailing, spacing: 5) {
            Spacer()
            Text("this is my quite long title here")
                    .font(.title)
                    .bold()
                    .foregroundColor(.white)
                    .lineLimit(nil)
                    .multilineTextAlignment(.trailing)
            Text("subtitle this is my long long subtitle to create multiply lines")
                    .font(.caption)
                    .foregroundColor(.white)
                    .lineLimit(nil)
                    .multilineTextAlignment(.trailing)
        }
        .padding()
    }

struct NetworkImage: View {
    let url: URL?
    var body: some View {
        if let url = url, let imageData = try? Data(contentsOf: url), let uiImage = UIImage(data: imageData) {
            Image(uiImage: uiImage)
                .resizable()
                .scaledToFill()
        }
    }
}

但这看起来很糟糕，这不是我需要实现的目标。

我需要使它与右侧和底部对齐，并从边缘进行一些填充。就这些。我该怎么做？

从@user1046037 更新后的答案看起来像：

Answer 1

代码更改：

1。 ZStack 对齐

ZStack(alignment: Alignment(horizontal: .trailing, vertical: .bottom)) {

2。在中心裁剪

在NetworkImage 中，在图片扩展中居中裁剪（提供代码）。

感谢@vacawama How to center crop an image in SwiftUI

完整代码：

struct ContentView: View {
    var body: some View {
        ZStack(alignment: Alignment(horizontal: .trailing, vertical: .bottom)) {
            
            NetworkImage(url: URL(string: "https://unsplash.com/photos/KZv3Rb_OIXI/download?force=true"))
            VStack(alignment: .trailing, spacing: 5) {
                Spacer()
                Text("this is my quite long title here")
                        .font(.title)
                        .bold()
                        .foregroundColor(.white)
                        .lineLimit(nil)
                        .multilineTextAlignment(.trailing)
                Text("subtitle this is my long long subtitle to create multiply lines")
                        .font(.caption)
                        .foregroundColor(.white)
                        .lineLimit(nil)
                        .multilineTextAlignment(.trailing)
            }
            .padding()
        }
    }
}

//Center Crop
extension Image {
    func centerCropped() -> some View {
        GeometryReader { geo in
            self
            .resizable()
            .scaledToFill()
            .frame(width: geo.size.width, height: geo.size.height)
            .clipped()
        }
    }
}

struct NetworkImage: View {
    let url: URL?
    var body: some View {
        if let url = url, let imageData = try? Data(contentsOf: url), let uiImage = UIImage(data: imageData) {
            Image(uiImage: uiImage)
                .centerCropped()
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Answer 2

带有Image 的ZStack 是问题所在。 ZStack 不是裁剪图像，它实际上是在增长以适应图像并延伸到小部件的边界之外。文本位于同一个 ZStack 内，因此它也会增长以填充可用空间。

也许这有助于可视化问题（黑色圆形矩形是 widget 框架）：

解决方案

将图像放在 VStack 的 .background 中：

var body: some View {

    VStack(alignment: .trailing, spacing: 5) {
        Spacer()
        Text("this is my quite long title here")
            .font(.title)
            .bold()
            .foregroundColor(.white)
            .lineLimit(nil)
            .multilineTextAlignment(.trailing)
        Text("subtitle this is my long long subtitle to create multiply lines")
            .font(.caption)
            .foregroundColor(.white)
            .lineLimit(nil)
            .multilineTextAlignment(.trailing)
    }
    .padding()
    .frame(maxWidth: .infinity, maxHeight: .infinity)
    .background(NetworkImage(url: url))

}

struct NetworkImage: View {
    let url: URL?
    var body: some View {
        if let url = url, let imageData = try? Data(contentsOf: url), let uiImage = UIImage(data: imageData) {
            Image(uiImage: uiImage)
                .resizable()
                .scaledToFill()
        }
    }
}