SwiftUI-如何在图像上添加前景线性渐变

Question

对于使用SwiftUI拍摄的图像，我找不到任何有关在前景上进行线性渐变的相关文档。

我试图这样做：

Image("IconLoseWeight")
  .frame(width: 30.0, height: 30.0)
  .padding(.leading, 17)
  .foregroundColor(LinearGradient(gradient: Gradient(colors: [.white, .black]), startPoint: .top, endPoint: .bottom))

实际上，上面显示的代码不会显示任何错误，但是会使用在顶级堆栈中没有意义的警告（我认为这是Xcode或SwiftUI的错误）破坏代码。如果删除foreground修饰符，则代码将正常运行。

Answer 1

那是因为前景色需要一个Color，但是LinearGradient是一个符合协议struct和ShapeStyle的{​​{1}}。

如果我对您的理解正确，那么您想用渐变填充图像的不透明区域吗？

View

结果如下：

Answer 2

此处的任务是在图像上显示渐变。为了在另一个SwiftUI上显示一个视图，提供了ZStack视图，因此，代码可以具有下一个结构：

ZStack {
    <Image>
    <Rectangle with gradient>
}

另外，要确保将我们使用的图像正确调整为指定的帧resizable修饰符，应使用正确的contentMode：

Image("IconLoseWeight")
    .resizable()                     // Make it resizable
    .aspectRatio(contentMode: .fit)  // Specifying the resizing mode so that image scaled correctly

毕竟，我们需要将frame和padding参数应用于ZStack，以使渐变具有与图像相同的大小。

结果如下：

ZStack {
    Image("IconLoseWeight")
        .resizable()                    // Making the image resizable to the container size
        .aspectRatio(contentMode: .fit) // Setting up resizing mode so that the image scaled correctly

    Rectangle()                         // Shapes are resizable by default
        .foregroundColor(.clear)        // Making rectangle transparent
        .background(LinearGradient(gradient: Gradient(colors: [.clear, .black]), startPoint: .top, endPoint: .bottom), cornerRadius: 0)   
                                        // Specifying gradient (note that one color is .clear)
}
.frame(width: 30, height: 30)           // Applying frame
.padding(.leading, 17)                  // Applying padding

请注意，我们使用从.clear到.black的渐变色，因为我们需要透明的渐变色才能使图像可见。

Answer 3

同意@ RyuX51的回答，它运行良好。但是有些改变了我图像的大小和对齐方式。因为未设置LinearGradient的{​​{1}}。
所以在这里，我想出了将梯度应用于frame

的解决方案

Image