[iOS - SwiftUI] 헷갈리기 쉬운 frame(maxWidth: .infinity) 이해하기 (#Rounded 처리)

frame(maxWidth: .infinity)의 의미

• "부모가 줄 수 있는 만큼 가로폭을 가득 채워라" 란 의미
  • frame(maxWidth: .infinity)는 최대 크기를 제한 한다는 느낌을 주는데 이 의미가 아님
• 다른 예제)
  • 아래처럼 텍스트가 좌우 24 패딩을 갖는 뷰 구현?

• 여기도 frame(maxWidth: .infinity)를 추가하여 구현

struct Example1: View {
    var body: some View {
        VStack {
            Text("Hello")
                .frame(maxWidth: .infinity) // <-
                .background(Color.red)
                .padding(.horizontal, 24)
            
            Text("World")
                .frame(maxWidth: .infinity)
                .background(Color.blue)
                .padding(.horizontal, 24)
        }
    }
}

 

Rounded 처리 방법

• 보통 외부 마진을 주고 버튼이 수평으로 쫙 펼친 아래와 같은 것을 요건이 있는 경우?

• 구현하다보면 아래처럼 내부 콘텐츠에 fit하게 작성되는 경우가 존재

• 코드

struct ContentView: View {
    var body: some View {
        VStack(spacing: 0) {
            Text("title")
                .font(.title)

            Spacer()
                .frame(height: 8)

            Text("desc")
        }
        .padding(.horizontal, 15)
        .padding(.vertical, 20)
        .background(Color.blue)
        .clipShape(RoundedRectangle(cornerRadius: 16))
        .padding(.horizontal, 45)
    }
}

• 이럴땐 frame(maxWidth: .infinity)를 추가하여 해결이 가능
  
  • frame(maxWidth: .infinity)는 최대 크기를 고정한다는 느낌을 주는데 이 의미가 아님을 주의

struct ContentView: View {
    var body: some View {
        VStack(spacing: 0) {
            Text("title")
                .font(.title)

            Spacer()
                .frame(height: 8)

            Text("desc")
        }
        .padding(.horizontal, 15)
        .padding(.vertical, 20)
        .frame(maxWidth: .infinity) //<-
        .background(Color.blue)
        .clipShape(RoundedRectangle(cornerRadius: 16))
        .padding(.horizontal, 45)
    }
}