GeometryReader 를 사용하게 되면 부모 레이아웃의 크기를 알아내서 위치 및 사이즈를 조절할 수 있습니다. 아래 코드에서는 뷰의 크기를 계산하여 현재 상태가 세로인지 가로인지를 파악할 수 있도록 한 예제 코드입니다. GeometryReader를 사용하며 클로저를 통해서 .size.height 와 .size.width 를 사용하여 크기를 파악할 수 있습니다.struct ContentView: View { var body: some View { GeometryReader { geometry in let isPortrait = geometry.size.height > geometry.size.width let message = isPortrait ? "Port..

import SwiftUIstruct ContentView: View { @Environment(\.horizontalSizeClass) var horizontalClass var body: some View { Group { if horizontalClass == .compact { VStack(spacing: 0) { HeaderView(isCompact: true) BodyView() } } else { HStack(spacing: 0) { HeaderView(isCompact: false) Bod..

탭을 할 수 있는 UI 를 만들기 위해서는 TabView에 뷰를 배치하고 각 탭의 내용에 tabItem(_:) modifier 를 적용합니다. iOS 에서는 badge modifier 같은 badge(_:) 를 사용하여 각 탭에 badge 를 할당할수도 있습니다. 다음 예제는 세 개의 탭이 있는 탭 보기를 생성하며, 각각은 사용자 지정 자식 보기를 제공합니다. 첫 번째 탭에는 숫자 배지가 있고 세 번째 탭에는 문자열 badge가 있습니다.TabView { ReceivedView() .badge(2) .tabItem { Label("Received", systemImage: "tray.and.arrow.down.fill") } SentVi..

titleKey: dialog 에 대해 설명할 수 있는 제목isPresented: 설정된 데이터의 값이 바뀌게 되면 confimationDialog View 가 나타납니다.titleVisibility: 제목의 투명도(가시성) 설정actions: 어떤 작업을 할지 Content 를 설정합니다.struct ContentView: View { @State private var showDialog = false var body: some View { Button("Tap to show alert") { showDialog = true } .confirmationDialog("Email", isPresented: $showDialog) { ..

Alert 를 사용하기 위해서는 .alert 를 사용해야합니다. primaryButton 은 첫 번째 버튼이며 secondaryButton 은 두 번째 버튼입니다. 버튼의 role 를 설정하여 버튼의 색깔을 다르게 하여 각각에 역할에 맞게 UI를 만들 수 있습니다.struct ContentView: View { @State private var showAlert = false var body: some View { Button("Tap to show alert") { showAlert = true } .alert("Login failed", isPresented: $showAlert) { Button("CANCLE",..

Modal 는 상호 작용을 제공하는 별도의 보기로 콘텐츠를 표시하는 뷰 입니다. 가장 대표적인 Modal 를 사용하는 방법은 다음과 같습니다. 아래 메서드들의 공통점은 특정 값을 지정하여 해당 값이 변했을 경우 Modal이 나타나게 합니다.func sheet(isPresented: Binding, onDismiss: Closure, content: Closure)Presents a sheet when a binding to a Boolean value that you provide is true.func sheet(item: Binding, onDismiss: Closure, content: Closure) Presents a sheet using the given item as a data source..