CXYVIP官网源码交易平台_网站源码_商城源码_小程序源码平台-丞旭猿论坛
CXYVIP官网源码交易平台_网站源码_商城源码_小程序源码平台-丞旭猿论坛
CXYVIP官网源码交易平台_网站源码_商城源码_小程序源码平台-丞旭猿论坛

SwiftUI丨自定义按钮-永久免费的源码丞旭猿

日学一语,日行一善。

一、本期目标

实现一个比较流行的按钮UI。

二、项目分析

1、从层次上分析,这个按钮分为三层:① 圆角矩形 ; ② 圆形 ; ③ 开关图形;

2、从颜色上分析,按钮本身是白色的,为了模拟光影效果,所以将圆角矩形的颜色设为淡淡的浅灰色;

3、从光影上分析,模拟左上方打光,所以左上方为亮部,右下方为阴影位置;

三、实现过程

1.构建层次

ZStack( ) // ZStack 是 以 z 轴为排列方式,也就是说层叠排列

{

最低层:矩形

中间层:圆形

最上层:图标

}

swiftui中的zstack的层次关系是先写的在最下面,再写的在上面,这就是为什么先布局最底层,然后是中间层和最上层。

下面是具体的代码,黑色部分即为上面的层次分析所对应的代码。

3-1

2、代码解析:

ZStack:布局命令,以Z轴方向的布局。

alignment: 对齐方式。

.center:中间对齐。

RoundedRectangle():有圆角的矩形命令。

cornerRadius:30:圆角半径为30。

.style: .continuous:圆角的类型,这种圆角比较圆滑,推荐使用。

.frame(width:100,height:100,alignment: .center):给矩形设置宽度和高度均为100像素的尺寸,对齐方式为中间对齐。

.foregroundColor(Color( colorLiteral(red: 0.9528942704, green: 0.947229445, blue: 0.9572485089, alpha: 1))):给矩形设置前景色。

Circle():圆形命令。

重复的代码省略… …

.shadow(color: .white, radius:5, x:-5, y:-5):投影命令,在圆形左上方设置白色的投影,模拟白色的光照效果。

.shadow(color: .secondary, radius:5, x:5, y:5):在圆形的右下方设置灰色的投影,模拟暗部效果。

Image(systemName:”power”):名为” power ” 的图片命令。

.resizable():将图片设置为可变尺寸的形式。

.scaledToFit():变化尺寸时图片以原有比例进行调整。

注: .resizable() 和 .scaledToFit() 这两个命令可视为固定用法,以后写代码的时候只要跟图片缩放有关的,想都不用想,先把这哥俩写上,然后再写尺寸。

三、举一反三

思考一下,如何在这个案例的基础上,让图片有 内阴影 的效果。


你答应过我,我用心写,你用心看;既会点赞,还会收藏,偶尔还会分享打赏

本篇完,感谢阅读!

送给想学《缠论》但一直被缠的朋友,下面这个视频可能是你遇到的最易懂的缠论课程

完整视频:https://www.ixigua.com/i6808748506887488011/

声明:本文部分素材转载自互联网,如有侵权立即删除 。

© 版权声明
THE END
喜欢就支持一下吧
点赞0赞赏 分享
相关推荐
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容