SwiftUI丨自定义按钮

一、本期目标

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

二、项目分析

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

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

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

三、实现过程

1.构建层次

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

{

最低层：矩形

中间层：圆形

最上层：图标

}

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

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

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/