SwiftUI从入门到实战第2章第14节:AngularGradient

Easter79
• 阅读 606

相关课程:http://hdjc8.com/hdjc/swiftUI/

使用AngularGradient绘制角度颜色渐变的背景。本节课演示角度渐变的使用。角度渐变是指从起点到终点,颜色按顺时针做扇形渐变,即发射形渐变。

示例代码:

VStack{
    Text("SwifUI Gradient")//首先修改此处的文本视图,角度渐变将作为文本视图的背景。
    .font(.system(size: 36))//设置文本视图的字体尺寸为36,增加文字的尺寸。
    .padding()//设置文本视图的间距,增加文本视图的内边距。
    .foregroundColor(.white)//接着设置文本的颜色为白色,以突出作为背景存在的角度渐变。
    //给文本视图添加一个背景,角度渐变将被放入小括号之内。
    //创建一个角度渐变,起始颜色为橙色,中间颜色为红色,终点颜色为紫色。渐变的中心点位于文本视图的中心位置。
    .background(AngularGradient(gradient: Gradient(colors: [.orange, .red, .purple]), center: UnitPoint(x: 0.5, y: 0.5), angle: Angle.init(degrees: -45)))

    Text("SwifUI Gradient")
    .font(.system(size: 36))
    .padding()
    .foregroundColor(.white)
    .background(AngularGradient(gradient: Gradient(colors: [.orange, .red, .purple]), center: UnitPoint(x: 0.5, y: 0.5), startAngle: Angle.init(degrees: 0), endAngle: Angle.init(degrees: 0)))

}

查看运行结果:

SwiftUI从入门到实战第2章第14节:AngularGradient

点赞
收藏
评论区
推荐文章
九路 九路
4年前
一篇文章带你了解CSS 渐变知识
CSS3渐变使您能够是你的背景颜色在两个或多个颜色之间平滑过渡。早些时候,你必须使用图像实现这些效果。然而,通过使用CSS3渐变可以减少下载时间和带宽的使用.此外,缩放的元素在缩放时看起来更好,因为渐变是由浏览器生成的。一、浏览器支持表中的数字指定完全支持该属性的第一个浏览器版本。(来源于百度)数字后面的w
九路 九路
4年前
图形处理:给 Canvas 文本填充线性渐变
在Canvas中对文本填充水平或垂直的线性渐变可以轻易实现,而带角度的渐变就复杂很多;就好像下面这样,假设文本矩形宽为W,高为H,左上角坐标为X,Y。渐变示例.jpg(https://imghelloworld.osscnbeijing.aliyuncs.com/imgs/48edf7ce289dab3e1972d973aa
Easter79 Easter79
3年前
SwiftUI从入门到实战第2章第7节:TabView
相关课程:http://hdjc8.com/hdjc/swiftUI/(https://www.oschina.net/action/GoToLink?urlhttp%3A%2F%2Fhdjc8.com%2Fhdjc%2FswiftUI%2F)TabView相当于UIKit中的UITabBarController,用于实现标签视图集。标签视图位
Easter79 Easter79
3年前
SwiftUI从入门到实战第2章第3节:Slider的使用
相关课程:http://hdjc8.com/hdjc/swiftUI/(https://www.oschina.net/action/GoToLink?urlhttp%3A%2F%2Fhdjc8.com%2Fhdjc%2FswiftUI%2F)Slider相当于UIKit中的UISlider,通过移动滑杆实现指定区域和间隔的数值的选择。Slid
Easter79 Easter79
3年前
SwiftUI从入门到实战第2章第1节:PickerDate
相关课程:http://hdjc8.com/hdjc/swiftUI/(https://www.oschina.net/action/GoToLink?urlhttp%3A%2F%2Fhdjc8.com%2Fhdjc%2FswiftUI%2F)本节演示DatePicker视图的使用,DatePicker和UIKit中的UIDatePicker类似,
Wesley13 Wesley13
3年前
CSS背景渐变
在css(https://www.oschina.net/action/GoToLink?urlhttp%3A%2F%2Fwww.51code.com%2F)中,有时我们需要实现如下图所示的,背景渐变(https://www.oschina.net/action/GoToLink?urlhttp%3A%2F%2Fwww.51code.com%2F
Wesley13 Wesley13
3年前
CSS背景颜色渐变
兼容多浏览器就要为每一个浏览器写对应的 CSS,太低版本的浏览器只能使用图片做背景。下面是当前五大浏览器对 gradient 的支持<style type"text/css" media"screen"gradient {width: 200px;height: 200px;/\ 如果浏览器不支持渐变,使用图像作为背景 \
Stella981 Stella981
3年前
Javascript模块化编程:模块的写法
随着网站逐渐变成"互联网应用程序(https://www.oschina.net/action/GoToLink?urlhttp%3A%2F%2Fen.wikipedia.org%2Fwiki%2FWeb_application)",嵌入网页的Javascript代码越来越庞大,越来越复杂。!(https://static.oschina.ne
Stella981 Stella981
3年前
CSS:linear
css语法background:lineargradient(direction,colorstop1,colorstop2,...);direction:用角度值指定渐变的方向(或角度);colorstop1,colorstop2,...:用于指定渐变的起止颜色_ps_:至少需要两种颜色1b
Easter79 Easter79
3年前
SwiftUI从入门到实战第2章第5节:Segment
相关课程:http://hdjc8.com/hdjc/swiftUI/(https://www.oschina.net/action/GoToLink?urlhttp%3A%2F%2Fhdjc8.com%2Fhdjc%2FswiftUI%2F)Segment分段控件,类似于UIKit中的UISegmentedControl。分段控件提供一栏选项按钮
Easter79
Easter79
Lv1
今生可爱与温柔,每一样都不能少。
文章
2.8k
粉丝
5
获赞
1.2k