SwiftUI如何使用blendMode将视图融合在一起?

7 min read

SwiftUI中的blendMode有多种可用的选项,可以将视图融合在一起。以下是一些示例:

  1. 将两个视图混合在一起,使用blendMode(.multiply):
ZStack {
    Image("image1")
    Image("image2")
        .blendMode(.multiply)
}
  1. 将两个视图添加到一起,使用blendMode(.plusLighter):
ZStack {
    Image("image1")
    Image("image2")
        .blendMode(.plusLighter)
}
  1. 将两个文本视图混合在一起,使用blendMode(.overlay):
ZStack {
    Text("Hello")
        .font(.largeTitle)
        .foregroundColor(.red)
    Text("World")
        .font(.largeTitle)
        .foregroundColor(.blue)
        .blendMode(.overlay)
}
  1. 将文本和图像混合在一起,使用blendMode(.destinationOver):
ZStack {
    Image("image1")
        .resizable()
        .frame(width: 200, height: 200)
        .scaledToFit()
    Text("Hello World")
        .font(.title)
        .fontWeight(.bold)
        .foregroundColor(.white)
        .background(Color.black)
        .blendMode(.destinationOver)
}

通过调整blendMode选项,可以创建许多有趣的视觉效果,例如混合相同颜色的视图,创建半透明效果,或者创建截图效果。