ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [SwiftUI] UI에 자주 쓰이는 Modifier 모음
    SwiftUI 2024. 3. 13. 15:43
    728x90

     

    오늘은 Modifier에 대해서 알아보자!👩🏻‍🍳


    SwiftUI에서 Modifier는 뷰의 모양, 레이아웃, 기능을 변경하기 위해서 사용되는 강력한 도구이다.

    모디파이어를 사용하면 코드의 재사용성을 높이고, 간결하고 읽기 쉬운 코드를 작성할 수 있다.

     

    텍스트 모양 변경하기

    Text("안녕하세요, SwiftUI!")
        .font(.title) // 글꼴을 제목 스타일로 설정
        .foregroundColor(.blue) // 글자 색상을 파란색으로 설정
        .padding() // 주변에 패딩 추가
        .background(Color.yellow) // 배경색을 노란색으로 설정
        .cornerRadius(10) // 모서리를 둥글게 처리

     

    글꼴의 모양부터 글자 색상, 패딩, 배경색, 모서리를 둥글게 설정할 수 있다.

     

    버튼 스타일 변경하기

    Button(action: {
        print("버튼이 클릭되었습니다!")
    }) {
        Text("클릭하세요")
            .padding()
            .background(Color.green)
            .foregroundColor(.white)
            .cornerRadius(8)
    }

     

    이미지 모양 변경하기

    Image("exampleImage") // "exampleImage"라는 이름의 이미지를 로드
        .resizable() // 이미지 크기 조절 가능하게 설정
        .aspectRatio(contentMode: .fill) // 내용 모드를 채움으로 설정
        .frame(width: 100, height: 100) // 프레임 크기를 100x100으로 설정
        .clipped() // 프레임을 넘어가는 이미지 부분을 잘라냄
        .cornerRadius(50) // 모서리를 둥글게 처리하여 원형 이미지 생성
        .shadow(radius: 10) // 그림자 추가

     

    여기서는 이미지의 크기 조절부터 프레임에 맞춰 잘라내고, 그림자 추가도 가능하다.

     

    SwiftUI에서 모디파이어를 사용하는 것은 매우 간단하지만 자주 사용하기 때문에 다양한 모디파이어를 알아두면 좋다. 이것만 있으면 디자인과 기능 구현은 쉽고 빠르게 가능하다는 것!

    아 참고로 모디파이어 선언 순서에 따라서 결과가 달라질 수 있으니 참고해서 개발하기!


    오늘의 코드 레시피👩🏻‍🍳 완료!🩷

    728x90
예콩이의 코드 레시피