日學一語,日行一善。
一、本期目標
實現一個比較流行的按鈕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/