SwiftUI에서 도형을 배경으로 설정하기

SwiftUI에서 View의 배경을 캡슐 모양이나 직사각형 모양으로 만들고 싶을 때, background(_:in:fillStyle:) 사용하면 된다.

기본 사용법

Text("Hello, world!")
    .foregroundStyle(.white)
    .padding()		// padding을 써서 여유 있는 모양으로 만들 수 있음
    .background(
        Color.blue.gradient,
        in: Capsule()
)

사용 가능한 도형들

이 modifier를 사용하여 다음과 같은 InsettableShape 프로토콜을 준수하는 도형들을 뷰 뒤에 레이어링할 수 있다:

• Rectangle - 직사각형 모양
• Circle - 원형 모양
• Capsule - 캡슐 모양
• RoundedRectangle - 둥근 모서리 직사각형

다양한 스타일 예시

VStack(spacing: 10) {
    // 기본 색상 배경
    Text("Rectangle")
        .padding()
        .background(.red.gradient, in: Rectangle())

    // 둥근 모서리 직사각형
    Text("Rounded Rectangle")
        .padding()
        .background(.green.gradient, in: RoundedRectangle(cornerRadius: 12))

    // 그라데이션 배경
    Text("Capsule")
        .padding()
        .background(.blue.gradient, in: Capsule())
}
.foregroundStyle(.white)

다른 뷰와 함께 배경을 지정하거나 화면 전체 백그라운드 만드는 방법은 이 글에서 참고하면 된다.

참고

background(_:in:fillStyle:)