iOS, 最新消息

SwiftUI 圓角與圓角邊框

Posted on by 朱克剛

SwiftUI中的元件要呈現圓角很容易，使用cornerRadius 修飾器即可，順便透過LinearGradient填入一個漸層色背景。

ZStack {
    LinearGradient(
        colors: [.white, .indigo.opacity(0.4)],
        startPoint: .top,
        endPoint: .bottom
    )
    Text("Hello, World!")
}
.frame(width: 200, height: 100)
.cornerRadius(10)
截圖 2022-10-12 12.57.53
圓角

圓角邊框需要在圖形上使用overlay修飾器疊上一個圓角矩形才能正確出現圓角邊框。

ZStack {
    LinearGradient(
        colors: [.white, .indigo.opacity(0.4)],
        startPoint: .top,
        endPoint: .bottom
    )
    Text("Hello, World!")
}
.frame(width: 200, height: 100)
.cornerRadius(10)
.overlay {
    RoundedRectangle(cornerRadius: 10)
        .stroke(.indigo, lineWidth: 2)
}
截圖 2022-10-12 12.58.06
圓角邊框
朱克剛
朱克剛

發表迴響