个人中心
gpt4 book ai didi

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

转载 作者：qq735679552 更新时间：2022-09-28 22:32:09 25 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章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 。

最后此篇关于iOS SwiftUI 颜色渐变填充效果的实现的文章就讲到这里了,如果你想了解更多关于iOS SwiftUI 颜色渐变填充效果的实现的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

25 4 0
文章推荐： 详解python中的异常捕获
文章推荐： springboot如何使用@Value获取配置文件的值
文章推荐： python 6种方法实现单例模式
文章推荐： Ubuntu16安装Python3.9的实现步骤
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com