[swiftUI] GeometryReader - 화면비율에 따라 UI 조절

https://developer.apple.com/documentation/swiftui/geometryreader#declaration

Apple Developer Documentation

 

별 설명이 없는 애플 공식문서 ...
혹시 자세히 설명되어있는 공식문서가 있다면 ... 댓글 부탁드립니다 😭

 

앱은 화면비율에 따라서 유동적으로 크기를 주는 경우가 많은데

swiftUI에서는 어떻게 처리하는지 알아보았습니다 !

 

struct ContentView: View {
  var body: some View {
    List {
      ForEach(0..<10) { _ in
        OhttRowView()
      }
    }
  }
}

struct OhttRowView: View {
  var body: some View {
    GeometryReader { geometry in
      HStack {
        Text("1111")
          .background(Color.green)
          .frame(width: geometry.size.width/2)
        Text("2222")
          .background(Color.red)
        Text("3333")
          .frame(width: geometry.size.width/5)
        Text("2222")
          .background(Color.blue)
        Text("4444")
          .background(Color.yellow)
      }
    }
  }
}

 

이렇게 유동적으로 비율을 줄 화면을 GeometryReader로 감싸고

그 안에서 geometry의 사이즈의 비율로 frame을 조절해주면 됩니다 :) 

 

 

Text("1111")
          .frame(width: geometry.size.width/2)
          .background(Color.green)

아니 근데 왜 글자가 적힌 부분에만 background가 적용되지 ... 했는데

이렇게 frame을 먼저 주고 background를 줬더니 전체가 다 적용이 되는군요 ... ! 

frame을 주기 전에는 text가 글자 크기에 딱 맞게 되어있었고,

그 상태에서 background를 주고 frame을 바꾸어서  다른부분에 색이 안칠해지는건가 싶네요

 

스유입문 3일차 오늘은 우선 여기까지 끄적여봅니다