Proportional layouts are crucial in modern app development to ensure that user interfaces adapt seamlessly to different screen sizes and orientations. In the Apple ecosystem, particularly when developing iOS, macOS, watchOS, or tvOS applications, SwiftUI provides powerful tools to create responsive and proportional layouts. This article will explore how to use SwiftUI to create proportional layouts, ensuring that your app's UI remains consistent and visually appealing across various devices.

Examples:

1. Basic Proportional Layout with SwiftUI:

   import SwiftUI
   
   struct ContentView: View {
       var body: some View {
           GeometryReader { geometry in
               VStack {
                   Text("Top Section")
                       .frame(width: geometry.size.width, height: geometry.size.height * 0.3)
                       .background(Color.blue)
   
                   Text("Middle Section")
                       .frame(width: geometry.size.width, height: geometry.size.height * 0.4)
                       .background(Color.green)
   
                   Text("Bottom Section")
                       .frame(width: geometry.size.width, height: geometry.size.height * 0.3)
                       .background(Color.red)
               }
           }
       }
   }
   
   struct ContentView_Previews: PreviewProvider {
       static var previews: some View {
           ContentView()
       }
   }

   In this example, we use GeometryReader to obtain the size of the parent view and then create three sections with proportional heights (30%, 40%, and 30% of the total height).

2. Proportional Layout with Dynamic Content:

   import SwiftUI
   
   struct ContentView: View {
       var body: some View {
           GeometryReader { geometry in
               VStack(spacing: 10) {
                   ForEach(0..<5) { index in
                       Text("Item \(index)")
                           .frame(width: geometry.size.width, height: geometry.size.height / 5 - 10)
                           .background(Color(hue: Double(index) / 5.0, saturation: 1.0, brightness: 1.0))
                   }
               }
           }
       }
   }
   
   struct ContentView_Previews: PreviewProvider {
       static var previews: some View {
           ContentView()
       }
   }

   This example demonstrates how to create a proportional layout with dynamic content. Each item in the ForEach loop takes up an equal portion of the available height, minus some spacing.

3. Proportional Layout with Aspect Ratio:

   import SwiftUI
   
   struct ContentView: View {
       var body: some View {
           GeometryReader { geometry in
               VStack {
                   Image(systemName: "star.fill")
                       .resizable()
                       .aspectRatio(contentMode: .fit)
                       .frame(width: geometry.size.width * 0.5)
                       .background(Color.yellow)
   
                   Spacer()
   
                   Image(systemName: "heart.fill")
                       .resizable()
                       .aspectRatio(contentMode: .fit)
                       .frame(width: geometry.size.width * 0.5)
                       .background(Color.pink)
               }
           }
       }
   }
   
   struct ContentView_Previews: PreviewProvider {
       static var previews: some View {
           ContentView()
       }
   }

   In this example, we use the aspectRatio modifier to maintain the aspect ratio of images while making their width proportional to the parent view's width.