Tunko Development Diary

[swiftUI] GeometryReader 부모컨테이너 기준으로 frame을 설정 본문

Development/iOS 개발

[swiftUI] GeometryReader 부모컨테이너 기준으로 frame을 설정

Tunko 2021. 2. 19. 21:29

프레임은 뷰들을 담고 있는 컨테이너의 크기에 따라 조절 되도록 구현 할 수 있습니다.

GeometryReader 로 뷰를 감싸고 컨테이너의 크기를 식별하기 위한 리더(reader)를 이용하여 할 수 있습니다.

struct ContentView: View {

    @State var textValue: String = "Press the button..."
    var body: some View {
        ScrollView
        {
            VStack(spacing:10) {
                GeometryReader { geometry in
                    HStack {
                        Text("Tunko").foregroundColor(Color.white)
                            .border(Color.black, width: 1)
                            .background(Color.gray)
                            .frame(width: geometry.size.width / 2, height:  geometry.size.height / 2, alignment: .center)
                            .border(Color.black, width: 1)
                    }
                }

                Text("Text")

            }.frame(width: 360, height: 360, alignment: .center)
        }
    }
}

위 결과물 처럼 VStack 자체가 360, 360 크기를 가지고 있고
내부에 Text 뷰는
width: geometry.size.width / 2, height: geometry.size.height / 2
이렇게 할당하고 있습니다.

geometry는 GeometryReader 를 담고있는 VStack을 의미합니다.
결과 적으로 내부의 Text뷰는 widith : 180, height : 180으로 프레임 크기가 됩니다.

반응형
Comments