概述
在SwiftUI
中,常用的圖形(Shape)主要有:
Circle
:圓形
Ellipse
:橢圓形
Capsule
:膠囊形
Rectangle
:矩形
RoundedRectangle
:圓角矩形
上面的這些圖形都繼承了Shape
協議,除了上面給出的圖形,也可以通過path
方法自定義圖形。
func path(in rect: CGRect) -> Path
上述圖形中,他們不像Text
或者Button
這類組件是根據自身內容自適應frame的,而是默認填充其父視圖的大小,除非指定frame。
修飾器(modifier)
通過修飾器,可以設置圖形的各種屬性,包括顏色,邊框,大小,等等。
1. 填充顏色
填充顏色即設置圖形的顏色,可以通過下面兩個方法設置:
.fill()
.foregroundColor()
兩個方法中可以直接顏色參數,比如:
.fill(Color.red)
.foregroundColor(.blue)
除了設置具體的顏色,還可以設置漸變色,比如:
.fill(LinearGradient(colors: [Color.red, Color.blue], startPoint: .top, endPoint: .bottom))
.foregroundColor(LinearGradient(colors: [Color.red, Color.blue], startPoint: .top, endPoint: .bottom))
在.fill()
方法中還可以添加一個style
參數,比如:.fill(Color.red, style: FillStyle(eoFill: true, antialiased: false))
FillStyle
結構體中的isEOFilled
和isAntialiased
是兩個屬性,用于控制填充的行為和渲染效果。
2. 邊框
設置邊框最直接的方法:.stroke()
,如果不設置任何參數,則取默認的顏色,黑色或者白色。
通常可以設置的參數如下:
.stroke(Color.red)
.stroke(Color.blue, lineWidth: 10.0)
.stroke(Color.blue, style: StrokeStyle(lineWidth: 10, lineCap: .round, dash: [40]))
通過StrokeStyle
,我們可以設置出一個虛線邊框。
3. 裁剪
通過.trim
方法可以對圖形進行裁剪。比如:
.trim(from: 0.5, to: 1)
.trim(from: 0, to: 0.5)
.trim(from: 0.25, to: 0.75)
.trim(from: 0.3, to: 1.0)
參數:
from
:繪制圖形時的起始部分。
to
:繪制圖形時的結束部分。
通過使用trim
方法,我們可以在SwiftUI中輕松地裁剪形狀的一部分,實現更加靈活和多樣化的視覺效果。
寫在最后
上面是用圓形做了一些基本修飾器的舉例,除了這些,個別圖形在創建的時候也有自己的獨有的屬性,比如創建RoundedRectangle
的時候,需要給定cornerRadius
。還有Capsule
和RoundedRectangle
創建的時候也可以設置style
屬性。
很多的時候這些形狀可以作為文字或者按鈕的背景存在,以實現更好的效果。
var body: some View {VStack(spacing: 20) {Circle().fill(Color.red)Ellipse().fill(LinearGradient(colors: [Color.red, Color.blue], startPoint: .top, endPoint: .bottom))Capsule(style: .circular).foregroundColor(.blue)Rectangle().stroke(Color.blue, lineWidth: 10.0)RoundedRectangle(cornerRadius: 25.0, style: RoundedCornerStyle.continuous).stroke(Color.blue, style: StrokeStyle(lineWidth: 20, lineCap: .round, dash: [40]))}.padding()}