正文

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

︶ㄣ米米素材网 メ
米米素材网V管理员 / 阅读
0709

这篇文章主要介绍了iOS SwiftUI 颜色渐变填充效果的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

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

gradient 渐变器

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

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

lineargradient 线性渐变器

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

下面我们看看lineargradient效果

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
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)
        }
 
    }
}

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
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 径向渐变

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

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
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

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

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
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)
     }
   }

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

原文链接：https://segmentfault.com/a/1190000021780657