当前位置： 移动技术网 > IT编程>移动开发>IOS > iOS SwiftUI 颜色渐变填充效果的实现

iOS SwiftUI 颜色渐变填充效果的实现

2020年05月10日  | 移动技术网IT编程  | 我要评论

感谢领导的话语,9887海贼王娜米,爱仕卡

swiftui 为我们提供了各种梯度选项，所有这些选项都可以通过多种方式使用。

gradient 渐变器

a color gradient represented as an array of color stops, each having a parametric location value.

gradient是一组颜色的合集，每个颜色都忽略位置参数

lineargradient 线性渐变器

线性渐变器拥有沿轴进行渐变函数，我们可以自定义设置颜色空间、起点和终点。

下面我们看看lineargradient效果

import swiftui

struct lineview: view {
   var gradient: gradient {
      let stops: [gradient.stop] = [
        .init(color: .red, location: 0.5),
        .init(color: .yellow, location: 0.5)
      ]
      return gradient(stops: stops)
    }
    
    var body: some view {
    
        zstack {
          lineargradient(gradient: gradient,
                 startpoint: .top,
                 endpoint: .trailing)
            .edgesignoringsafearea(.all)
          
          image("1")
            .resizable()
            .aspectratio(contentmode: .fit)
            .clipshape(circle())
            .overlay(circle()
              .stroke(linewidth: 8)
              .foregroundcolor(.white))
            .frame(width: 250)
          
        text("洛神赋图")
              .padding()
              .foregroundcolor(.white)
          .cornerradius(8)
              .background(lineargradient(gradient: gradient(colors: [.white, .black]), startpoint: .top, endpoint: .bottom))
          .offset(y:-280)
        }

    }
}

import swiftui

struct linegradient3color: view {
  
  var body: some view {
    zstack {
      lineargradient(gradient:
        gradient(
          colors: [.blue, .white, .pink]),
              startpoint: .topleading,
              endpoint: .bottomtrailing)
        .edgesignoringsafearea(.all)
      
      image("2")
        .resizable()
        .aspectratio(contentmode: .fit)
        .clipshape(circle())
        .overlay(circle()
          .stroke(linewidth: 8)
          .foregroundcolor(.white))
        .frame(width: 250)
      
      text("清明上河图")
        .padding()
        .foregroundcolor(.white)
        .cornerradius(8)
        .background(lineargradient(gradient: gradient(
          colors: [.yellow, .red]),
                      startpoint: .topleading,
          endpoint: .bottomtrailing))
        .offset(y:-180)
    }
  }
}

radial gradient 径向渐变

在径向渐变中，我们必须指定起始半径点，端半径点与中心点，从径向渐变开变.

import swiftui

struct radialview: view {
   var body: some view {
     zstack {
       radialgradient(gradient: gradient(
        colors: [.blue, .black]),
        center: .center,
        startradius: 2,
        endradius: 650)
         .edgesignoringsafearea(.all)
       
       image("3")
         .resizable()
         .aspectratio(contentmode: .fit)
         .clipshape(circle())
         .overlay(circle()
           .stroke(linewidth: 8)
           .foregroundcolor(.white))
         .frame(width: 250)
       
       text("富春山居图")
         .padding()
         .foregroundcolor(.white)
         .cornerradius(8)
         .background(
          radialgradient(gradient: gradient(
           colors: [.yellow, .red]),
                  center: .center,
                   startradius: 2,
               endradius: 60))
         .offset(y:-180)
     }
   }
}

angular gradient

在角渐变中，我们只需要通过中心点。

import swiftui

struct angularview: view {
    var body: some view {
     zstack {
      angulargradient(gradient: gradient(
        colors: [.green, .blue, .black, .green, .blue, .black, .green]),
        center: .center)
         .edgesignoringsafearea(.all)
       
       image("4")
         .resizable()
         .aspectratio(contentmode: .fit)
         .clipshape(circle())
         .overlay(circle()
           .stroke(linewidth: 8)
           .foregroundcolor(.white))
         .frame(width: 250)
       
       text("汉宫春晓图")
         .padding()
         .foregroundcolor(.white)
         .cornerradius(8)
         .background(
          radialgradient(gradient: gradient(
           colors: [.yellow, .red]),
                 center: .center,
                   startradius: 2,
              endradius: 60))
         .offset(y:-180)
     }
   }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网