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

Задача здесь - отобразить градиент над изображением. Для отображения одного представления поверх другого SwiftUI предоставляет представление ZStack, поэтому код может иметь следующую структуру:

ZStack {
    <Image>
    <Rectangle with gradient>
}

Кроме того, чтобы убедиться, что размер используемого нами изображения правильно изменен до указанного кадра * Модификатор 1005 * должен применяться с правильным значением contentMode:

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

В конце концов, нам нужно применить frame и параметр заполнения к 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, поскольку нам нужен прозрачный градиент, чтобы сделать изображение видимым.